如何为您的 WordPress 网站创建网站图标

已发表: 2022-08-19

大多数品牌或营销专家都喜欢分享他们对知名度的看法。 简而言之,您可以说您网站中使用的用户元素必须反映您的想法。 绝不能为您的 WordPress 网站考虑创建站点图标的任务。

但现在网站图标创建和上传到您的 WordPress 网站的任务变得更加容易。 但是,有很多不同的方法可以简化此任务

在互联网上,您可以找到多种方法,以最少的预算、专业知识和时间来完成这项任务。

在本博客中,我们将学习一些为您的 WordPress 网站设计网站图标的方法。 首先,熟悉为什么需要为 WordPress 创建站点图标。 除此之外,我们还将了解在创建站点图标时需要考虑的一些事实。

您所说的站点图标是什么意思,为什么将它放在您的 WordPress 网站上很重要?

您可能已经多次看到网站图标。 但是您还没有意识到这是站点图标。 事实上,现在您也可以在浏览器窗口的左上角看到站点图标。

站点图标被认为是显示在搜索引擎结果页面或浏览器页面选项卡旁边的重要小图标。

但是,您可以创建自己的站点图标来指定您的品牌。

为您的 WordPress 创建站点图标

当我们谈论您网站的品牌时,重要的是您的网站应该能够在第一眼就给您的访问者留下深刻印象。

如果您的品牌看起来很棒且专业,新客户将能够信任它。 网站图标可以帮助您获得信任并仅在第一印象中给访问者留下深刻印象。

实际上,不是一个完整的品牌战略将取决于您的网站图标的外观。 但是,如果您是潜在用户浏览您的网站的时间较长,则会产生积极影响,并提高网站的知名度。

3个简单的步骤来创建您网站的网站图标

在此任务中,需要考虑所涉及的两种不同情况。 首先是你需要建立一个站点图标。 然后,您必须将创建的站点图标上传到您的 WordPress 网站。

为 WordPress 创建站点图标的三个基本步骤是

  • 选择合适的图标大小
  • 在设计网站图标时,请遵循一些最佳做法
  • 对于工作,选择一个完美的工具

在此之后,我们将学习一些基本的上传图标的三个步骤:

  • 利用 WordPress 的预制功能
  • 要上传图标,请使用插件
  • 要上传站点图标,请编写代码

现在让我们详细了解所有这些步骤

第 1 步:为您的网站图标选择合适的尺寸

最重要的是站点图标的大小。 是的,这些文件的大小确实很小,但是您需要查看此图标中涉及的各个维度。 这一点很重要,因为每个平台都有不同的站点图标要求。

您会发现有些浏览器支持 32*32 像素的 .ico 文件。 这种图标大小的大小被称为标准大小。

但实际上,您必须使用大小为 512* 512 像素大小的 .png 文件。 大多数情况下使用 .png 文件,因为几乎每个默认浏览器都有这个大小的站点图标。

第 2 步:确保您在设计网站图标时使用了最佳实践

我们建议您不要选择简单的选项,而是专注于优化品牌并使用自定义网站图标。

使用您现有的徽标,您无法为您的网站打造品牌。 但是,您需要遵循一些趋势来为 WordPress 创建站点图标。

  • 为您的网站图标选择一种或两种简单的颜色,以确保它看起来一致且清晰可见。
  • 最小化您的徽标
  • 利用一些亮度来关注网站图标的主要方面。

让我们看一个真实世界的例子。 查看 SKT Themes 的网站图标。 它使用提供高对比度的橙色,并更加关注其网站的徽标。

这就是你所需要的。 连同另一个元素的品牌,它提供了一致性和可见性,并确保它在浏览器屏幕选项卡上可见。

第 3 步:创建您的网站图标选择正确的工具

一旦你完成了网站图标的大小和设计来创建它,下一步就是选择一个正确的工具。 正如我们上面提到的,您会发现有多种方法可以在 WordPress 上为 WordPress 创建站点图标。

但是,如果您知道如何使用 CANVA,那么您就有了创建站点图标的最理想方式。 您会发现 CANVA 的更多替代选项。 最好的选择之一是 designBold 。

另一个快速创建纯文本站点图标的替代方法是 https://favicon.io/favicon-generator/。 该工具还将帮助您下载不同大小的站点图标。

不要忘记将站点图标保存在 8 位或 24 位不透明 .PNG 文件之间很重要。 这是最优化的格式。 但是,favicon.io 将帮助您实现这一目标。

在您的网站上上传网站图标的 3 种不同方法是:

在 WordPress 中,您会发现上传网站图标的不同方法。 您将在下面找到上传网站图标的最佳方式。

1.利用WordPress的内置功能

WordPress 提供了在您的 WordPress 网站上上传网站图标的最佳方式和最简单的方式
如果您正在寻找最简单和最快的方法,那么您必须选择此选项。

第 1 步:在 WordPress 中访问您网站的身份屏幕

为此,您首先需要通过 WordPress 仪表板登录 WordPress。 现在转到主题选项面板。 高级主题包含许多选项。

考虑一个示例,您将使用 WordPress 默认主题,然后您需要转到外观,然后单击自定义定制器的点击现场身份屏幕。

一旦你现在完成了,你需要迈向另一个步骤

第 2 步:选择您的网站图标

现在查看另一个部分,即站点标识以选择站点图标。

单击“选择站点图标”并上传文件。 确保添加“替代文本”以增强可访问性。

第 3 步:在前端,检查您的网站图标

现在,在您的网站上检查前端,以了解网站图标是否已成功上传到您的网站。 您会发现 WordPress 将在浏览器模型中提供现有站点图标的大预览。

但是,您必须检查您的站点图标在 Web 浏览器中的外观或呈现方式。 这是必须考虑的最重要的因素。

2.添加WordPress插件

对于初学者或非技术人员,上传网站图标的最佳解决方案是集成 WordPress 插件。 使用 WordPress 网站的客户可以访问内置定制器选项。

如果您对 WordPress 站点图标有特殊要求,那么我们建议您采用这种方法,否则您必须在主题选项的帮助下上传站点图标。

Step1:选择合适的插件

我们想推荐的最好的插件之一是 RealFaviconGenerator 的 Favicon

RealFaviconGenerator.net 是帮助您生成网站图标的最受欢迎的网站之一。 但是,RealFaviconGenerator 的 Favicon 是 RealFaviconGenerator.net 的流行插件版本。

该插件将仅从单个图像生成不同的站点图标,并且站点图标将存储在媒体库中。

Step2:上传一个全尺寸的站点图标

安装并激活插件后,下一步将是登录 WordPress 仪表板并单击外观,然后单击图标面板。 在这里,您会发现许多感觉并不复杂的自定义选项。

你会发现一些令人困惑的词,但不用担心,你只需要从媒体库上传文件。 在这里您需要添加替代文本,不要忘记添加它。

现在开始单击显示“生成网站图标”的蓝色按钮,然后跳到另一个步骤。

第 3 步:下载网站图标

上传文件后,插件将开始生成站点图标。 您会发现该插件会将开发者网站的版本转换为 Web 应用程序版本。 在这里,您可以找到各种维度和平台的不同站点的站点图标。

从这里您可以选择一些特定于平台的选项,这些选项属于您的站点图标和设计的呈现方式。

现在您需要单击“生成您的网站图标和 HTML 代码”。 现在您会发现您的插件将如何神奇地开始工作。

您现在将在 WordPress 仪表板中找到用于预览站点图标的选项。

相关文章:将 Favicon 添加到 WordPress 网站的快速指南

3. 要显示您的站点图标,请使用代码

我们要建议的最后一步对于普通用户来说基本上是一个过时的解决方案。 但是您可以使用代码来展示站点图标以满足各种类型的需求。 如果您正在构建自定义主题,此选项也是更好的选择。

第 1 步:使用文件传输协议,您可以访问 WordPress 网站的服务器

要遵循这种方法,您需要通过 FTP 访问服务器。 另外,您将需要一些基本的编码知识,因为我们将处理 WordPress 的核心文件,我们建议您使用子主题。

一旦您可以访问所有这些东西,您就可以登录到服务器。 您可以通过主机控制面板访问您的凭证。

如果您想知道在哪里可以找到所有这些凭据,那么您可以连接到主机的支持渠道。

第 2 步:到您的 WordPress 网站,上传网站图标

当您登录服务器时,FTP 客户端会显示您网站的目录列表。

在这里将站点图标文件上传到您网站的根目录和主主题文件夹。

现在你几乎完成了。 现在最后一步是在 WordPress 中编写您的站点图标。

第 3 步:在您的 WordPress 标题中,添加代码

这是最后一步,也是您最后一次登录 WordPress 仪表板。 现在转到外观,然后单击主题编辑器页面:

当您尝试访问该页面时,将生成一个警告对话框弹出窗口。 在单击我了解之前,请确保您已阅读所有内容。

现在将显示可以轻松编辑的代码。 在这里从拖放菜单选项中选择主题。 现在在这里搜索代码行

现在下面提到的代码将它添加到

<头部>

标签

<link rel="快捷图标" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" />

现在单击更新文件按钮。

结论:
此博客中提到了为 WordPress 创建站点图标的基本步骤。