如何将 WordPress Favicon 添加到您的网站？ （3种方法）

什么是 WordPress 网站图标？

WordPress 网站图标是通常大小为 16×16 像素的小图标，代表您的品牌，位于您的页面附近，您可以在浏览器的选项卡中轻松查看。

早些时候，当Google Analytics不存在时，Favicon 被用作确定网络流量的工具。 但现在，它以增强用户体验和品牌认知度而闻名。

除此之外，拥有 WordPress Favicon 有助于提高品牌知名度。 因为它可以在您的浏览器选项卡、书签、历史档案等上轻松可见。 它们还可以用作智能手机或标签等小型设备上的网站快捷方式。 它有助于节省用户的时间，让他们轻松识别要浏览的网站，没有任何困难。

为什么使用 WordPress Favicon 有优势？

除了品牌识别和增强用户体验之外，我们已经讨论过使用 WordPress Favicon 的优势是它可以确保访问者正在浏览正确的网站并在正确的页面上。

假设您在浏览器中打开了许多选项卡，随着选项卡数量的增加，它将隐藏您网站的标题，如下所示：

此时，Favicon 帮助您快速识别您的网站，以便您轻松切换。 甚至，您可以要求访问者在他们的浏览器主屏幕或智能手机等小型设备上添加网站快捷方式，以便轻松快速地访问您的网站。

毕竟，每个网站的主要目标之一是提供独特的用户体验，以便访问者可以轻松地一次又一次地访问该网站。 这就是 WordPress Favicon 在您的 WordPress 网站中的帮助，有助于建立强大的品牌认知度并将用户体验提升到一个新的水平。

现在让我们看看，如何为您的网站创建漂亮的 WordPress Favicon。

如何创建 WordPress Favicon？

要创建 WordPress Favicon，您需要做的第一件事是确定 WordPress Favicon 的大小以及它应该支持的设备。 但是，已经有一个完整列表，列出了支持各种浏览器和平台的不同分辨率的网站图标。

但在这篇文章中，我们将使用最受推荐和最广泛接受的分辨率，以便您轻松为您的网站创建 WordPress Favicon，而不会产生任何混淆。

创建 WordPress Favicons 的一些最佳技巧

• Favicon 最推荐的分辨率是512×512像素。
• 选择即使缩小到16×16像素分辨率也必须看起来很棒的图像。
• 始终遵循 Google 提供的指南，才有资格在搜索结果旁边显示网站图标。
• 您可以选择矩形或方形图像，因为您可以选择在将其上传到 WordPress 之后或之前对其进行自定义。

您可以通过多种方式创建 WordPress Favicon。 您可以聘请能够更好地了解您的品牌并设计具有专业外观的网站图标的设计师。 您可以使用 WordPress Favicon 插件来创建 Favicon。 如果您知道如何使用 Adob​​e Photoshop，您甚至可以自己设计。

除此之外，还有各种在线工具可供使用，例如 Favicon generator 和 Favicon.cc，借助它们，您可以轻松创建 Favicon。

假设您要为您的网站 xyz.com 创建一个网站图标。 您不知道如何使用 Adob​​e Photoshop，甚至没有足够的预算聘请专业设计师。 在这种情况下，您将使用 Favicon 生成器。

首先，您需要访问该网站并上传您希望它转换为您的网站图标的图像，如下图所示：

选择适当的设置，例如

• 为 Web、Android、Microsoft 和 iOS 应用程序生成图标
• 仅为 16×16 WordPress 生成图标 Favicon.ico

选中这些框并单击创建网站图标按钮。 该网页将重新加载到下载页面，您可以从中轻松下载 Favicon zip 文件，如下所示：

但是，您也可以手动将 Favicon 添加到您的网站，方法是复制如上所示的代码并将其粘贴到 HTML 文档的头部。

如果您没有选择任何工具来设计您的网站图标并选择自己设计，那么在开始设计之前您必须牢记一些要点。

• 保持设计简洁干净，因为它会缩小其他人，细节可能会丢失。
• 您的网站图标设计必须与您的网站主徽标具有相同的颜色、图形或字体，或者必须代表您的品牌。
• 首先以更大的分辨率设计您的 Favicon，然后根据您的要求调整其大小。

完成 Favicon 设计后，您需要以支持的文件格式保存文件。 早些时候，有一种特定的 WordPress Favicon 文件类型“WordPress Favicon.ico”被广泛使用。 但现在情况发生了变化，现在所有现代 Web 浏览器都支持 PNG、GIF 和 ICO 文件格式。

然而，JPEG 文件格式也是可用的并且被广泛使用的格式来保存 Favicon 文件。 但是有一些旧版本的 Internet Explorer 不支持它们。 因此，最好只坚持那些获得普遍支持的人。

如何在您的网站上上传 WordPress Favicon？

成功设计并保存您的 Favicon 后，是时候将 Favicon 上传或添加到您的 WordPress 网站了。 你可以通过三种方式来做到这一点，

1. 通过 WordPress 定制器
2. 使用插件添加 Favicon
3. 手动添加 Favicon

使用 WordPress 定制器添加 Favicon

WordPress 4.3 版本发布后，引入了一个新选项，通过该选项，您可以轻松快捷地上传和裁剪图像以用作 Favicon。

您唯一需要做的就是上传高质量的清晰图像，最好是 512X512 分辨率。 首先，登录您的WordPress 仪表板 > 外观 > 自定义，如下图所示：

该页面将加载到您需要单击站点身份选项卡的自定义页面，如下所示：

单击站点标识选项卡后，您需要注意如图所示的“选择站点图标”按钮。

之后，将弹出一个 WordPress 媒体界面，您可以在其中上传图像或使用媒体库中的现有图像来制作您的 Favicon。 现在单击位于右下角的“选择”按钮。

之后，您可以裁剪或调整所选图像的大小以使其非常适合您的 Favicon，然后单击“裁剪图像”按钮以完成它。

完成上述所有步骤后，是时候保存所有更改并点击发布按钮使其生效。 但是，任何时候如果您对 Favicon 不满意，您需要重复上述步骤以更改 WordPress Favicon。

使用 WordPress Favicon 插件将 Favicon 添加到您的站点

如果您正在寻找除默认 WordPress 站点图标功能以外的更多选项，那么您可以借助 WordPress Favicon 插件。 有各种免费和流行的 Favicon 插件可用，它们具有相同的简单功能，但为您提供更多的兼容性选项和更定制的体验。

您可以使用的最流行和广泛使用的 WordPress Favicon 插件之一是 RealFaviconGenerator 的 Favicon。

该插件过于重视兼容性，因此您可以设置与大多数流行的 Web 浏览器兼容的响应式 Favicon。

首先，您需要通过WordPress 仪表板 > 插件 > 添加新安装 ReavFaviconGenerator 插件。

然后单击“安装”按钮并激活它。 现在转到外观 > Favicon并从媒体库中选择至少应为 70×70 的图片，然后单击Generate Favicon按钮，如下所示：

当您点击 Generate favicon 时，您将被重定向到插件网站，您需要向下滚动并点击“ Generate your Favicons and HTML code ”按钮。

当该工具在后台运行时，它会将您重定向回 WordPress 仪表板。 现在您的网站图标已准备就绪。

手动添加 WordPress Favicon

如果您不知道如何访问根目录，我们强烈建议您坚持以上两种简单的方法。 但是，如果您仍然喜欢使用手动方法，那么您将需要通过 FTP 客户端或您的Web 托管服务提供商提供的 cPanel 来执行此操作。

第 1 步：但在此之前，您需要访问 Realfavicongenrator 网站。 单击“选择您的 Favicon 图像”按钮以生成您的 Favicon。

上传图像后，您会注意到与使用 RealFaviconGenerator 插件时相同的用户界面。 如果您愿意，可以自定义或进行更改，然后向下滚动网页，然后单击“生成您的网站图标和 HTML 代码”按钮，如下所示：

第 2 步：当您单击Generate your Favicons and HTML code按钮时，页面将移至下一页，您可以从该页面下载Favicon Package 。

提取下载的 Favicon 包并通过 FTP 客户端或托管客户端提供的 cPanel 将其上传到您的网站根目录。

在WPOven ，我们努力为用户提供独特的体验，他们的便利是我们的首要任务。 因此，我们提供了一个新的文件管理器来轻松管理您的站点文件和文件夹。

介绍我们的新站点工具文件管理器。

使用 WPOven 的文件管理器，您可以轻松管理站点的文件和文件夹。 您可以轻松地执行以下各种任务。

• 安装 WordPress 插件和主题
• 创建、编辑、删除、重命名、移动和添加文件和文件夹
• 使用 zip 或解压缩文件创建档案
• 对文件进行排序
• 搜索文件和文件夹
• 上传文件

要通过文件管理器工具访问您站点的文件和文件夹，您需要先登录到 WPOven 仪表板。 然后选择您要处理的站点。

然后选择“工具”子菜单并单击“启动文件管理器”按钮。

您现在可以在文件管理器中查看站点的文件和文件夹

单击“添加文件”按钮并选择要上传的提取文件。

但是您必须知道，您要放置的文件必须在根文件夹中，否则它将不起作用。

第 3 步：要完成整个过程并使事情正常运行，您需要做的最后一步是将 RealFaviconGenerator 生成的代码片段添加到 WordPress 主题的 head 部分。

要将以下代码片段添加到页眉部分，您需要安装并激活页眉和页脚插件。 然后导航到设置>插入页眉和页脚并将代码片段粘贴到页眉部分，如下图所示，然后单击保存。

完成所有步骤后，您的网站图标应该开始出现。

如果 WordPress Favicon 没有显示怎么办？

如果您的 WordPress Favicon 没有显示，即使您已按照上述所有步骤操作，则可能是由于以下原因：

1. 使用了错误的 WordPress Favicon 文件类型——PNG、GIF 和 JPEG 是现代浏览器现在支持 Favicon 的一些图像文件格式。 但是旧浏览器不支持它们。 除此之外，即使是大多数网络浏览器都更喜欢使用 WordPress Favicon.ico 文件格式，因此最好选择。 Ico 格式以避免任何兼容性问题。
2. 无法配置适当的网站图标大小- 不向您的网站显示网站图标的另一个原因可能是网站图标图像大小与设备屏幕尺寸不兼容。 这可以通过使用 favicon.ico 文件类型来消除，该文件类型存储不同大小和分辨率的图像的多个版本。 因此，在任何屏幕尺寸上都可以轻松看到网站图标。
3. WordPress Favicon 插件与主题不兼容– 如果您使用 WordPress Favicon 生成器插件，它也可能显示与您正在使用的当前主题不兼容的问题。 因此，最好检查插件更新，它是否与您当前的主题和 WordPress 版本兼容。

概括

现在，您已经了解了 WordPress Favicon 如何帮助品牌识别和增强用户体验。 最好的部分是，任何人都可以通过遵循所有指南和这些简单的步骤在他们的网站上轻松创建和实施 Favicon：

1. 您可以使用大量可用选项轻松创建网站图标，例如使用在线网站图标生成器工具、插件并在专业人员的帮助下。
2. 您还可以通过 WordPress 自定义选项轻松地将它们添加到您的网站，使用插件或手动操作。

最后，如果您有任何更有价值的观点要补充，我们在这篇文章中没有提到，请在下面的评论部分告诉我们：

经常问的问题