2022 年添加 WordPress Favicon 的 3 种简单方法（初学者友好指南）
已发表: 2018-09-11准备好了解有关 WordPress 网站图标的所有信息了吗？
如果您不熟悉，您网站的 favicon 就是出现在 Web 浏览器选项卡上的那个小图标。 例如，这是我们在 HeroThemes 中的 favicon 的样子：
您还会看到一些人将网站图标称为“站点图标”。 别担心——它们是一样的。
在这篇文章中，您将学习：
- 为什么你应该关心像你的 WordPress favicon 这样的小东西
- 如何为您的 WordPress 网站创建网站图标（以及要使用的大小和格式）
- 如何使用三种不同的方法将网站图标添加到 WordPress
为什么你应该关心你的 WordPress Favicon
我知道我知道。 仅出现在浏览器选项卡中的小图像可能不会成就或破坏您的业务。 但是有两个原因，您应该花一些时间为 WordPress 创建网站图标。
首先，使用网站图标有助于打造品牌并使您的网站在访问者的浏览器中脱颖而出。 例如，在下面的屏幕截图中，哪些选项卡引起了您的注意？
这是 HeroThemes 和 Twitter，对吧？
这很重要，因为人们喜欢打开多个标签（不——你不是唯一一个囤积标签的人！ ）。 甚至早在 2009 年，人们平均使用 3 个以上的标签，年轻人中更多。 虽然我找不到更多最近的数据，但我愿意打赌平均值已经上升，而不是下降！
除了在浏览器中为您的网站打上品牌并使其脱颖而出之外，您的网站图标还有助于移动用户。 如果用户将您的网站保存到他们的主屏幕，您的网站图标将在许多设备上显示为图标。
当您考虑添加 WordPress 网站图标是多么容易时，这些好处绝对值得您花几分钟时间。
如何创建正确大小和格式的网站图标图像
在您按照下一节中有关如何将网站图标添加到 WordPress 的分步说明进行操作之前，您需要……实际拥有要用于网站图标的图像！
这意味着您需要了解网站图标的正确图像尺寸和格式。
随着设备阵列的出现，这变得比以前更复杂了。 但是为了解决这种复杂性，还有一些工具可以使用一个入门图标并为所有不同的设备自动格式化。
因此，要创建您的网站图标，您只需要以下内容：
- 一个正方形的图像。 最佳的 WordPress 图标大小是 512×512 像素，尽管像 260×260 像素这样更小的尺寸仍然可以接受。 我将向您展示的所有方法都将根据需要调整它的大小。
- png图像，这是现代网络的最佳选择。
要实际创建图像，您可以使用 Adobe Photoshop 或 GIMP 等工具。 或者，您也可以使用 Favicon.io 之类的工具从文本或表情符号生成网站图标图像。
如果你有一个高分辨率的标志，最简单的方法就是抓住你标志的方形版本（这就是我们在 HeroThemes 使用的）。
如何将 Favicon 添加到 WordPress（3 种方法）
获得图像文件后，您就可以将该网站图标添加到您的 WordPress 网站了。
下面，我将向您展示三种将网站图标添加到 WordPress 的不同方法。 不过，每种方法都有点不同。
为了帮助您选择适合您网站的网站，这里有一个简要说明：
- 添加具有核心 WordPress 功能的网站图标- 这非常简单，可让您通过 WordPress 定制器添加您的网站图标。 唯一的缺点是它不会为所有设备添加网站图标格式。 不过，对于大多数网站来说，这完全没问题。
- RealFaviconGenerator WordPress 插件——这使得为所有设备添加网站图标变得非常容易。 唯一潜在的缺点是它需要您保持插件处于活动状态，有些人可能不喜欢。
- RealFaviconGenerator 手动方法——不使用插件，您可以使用 RealFaviconGenerator 的网站并手动添加代码。 此方法无需保持插件处于活动状态，但会变得更复杂一些，因为您需要将代码片段添加到主题的标题中。
如果您是初学者，我建议您坚持前两种方法中的一种。 但高级用户可能更喜欢第三种方法。
如何使用核心功能向 WordPress 添加 Favicon
这个非常简单，因为它使用了 WordPress 的核心功能。
首先，转到 WordPress 仪表板中的外观 → 自定义以访问 WordPress 定制器：
进入 WordPress 定制器后，单击站点标识选项：
然后，找到站点图标部分并单击选择图片以上传您的网站图标图片：
这将打开常规的 WordPress 媒体库，您可以在其中像往常一样上传图像。
上传图片后，单击“选择”按钮：
从那里，WordPress 将为您提供裁剪图标图像的选项，以及作为浏览器和应用程序的图像实时预览。
调整到正确的裁剪，然后单击裁剪图像：
你完成了！ 确保单击 WordPress 定制器顶部的发布选项，您的网站图标应该是活动的。
如何使用 WordPress Favicon 插件（涵盖更多设备）
现在，我将向您展示如何使用 WordPress favicon 插件来实现相同的效果。
再说一次——这种方法与前一种方法的区别在于，该插件将为更多设备添加优化的网站图标。 它还为您提供了一个界面，可让您自定义网站图标在不同设备上的外观。
您将能够为以下内容创建自定义网站图标：
- iOS
- 安卓
- 视窗手机
- 等等。
你不一定需要这个——它更多的是关于覆盖边缘情况。
要遵循此方法，您需要安装免费的 Favicon by RealFaviconGenerator 插件。
激活插件后，转到Appearance → Favicon 。 使用从媒体库中选择按钮上传或从 WordPress 媒体库中选择您的网站图标。
然后，单击Generate favicon ：
之后，该插件会将您带到一个外部站点，您可以在其中调整您的网站图标在不同设备上的查找方式。
完成这些调整后，向下滚动并单击Generate your Favicons and HTML code按钮：
一旦您单击它，您将被带回您的 WordPress 仪表板，并且应该会看到一条成功消息，以及您在不同设备上的 favicon 预览：
而已！ 你都完成了。 只需确保保持插件处于活动状态 - 否则，您的网站图标将消失。
如何使用相同的 RealFaviconGenerator 工具手动将 Favicon 添加到 WordPress
同样，使用上面的插件方法，您需要保持插件处于活动状态才能继续使用您的网站图标。
如果这对您来说是个问题，您还可以使用相同的工具手动完成所有操作。
最终结果完全相同，您只需通过 FTP 手动上传图片，并将一些代码添加到您网站的 <head> 部分。
我将把这个分成几个步骤，因为它有点复杂......
第 1 步：生成您的 Favicon 包
要开始使用，请前往 RealFaviconGenerator 网站并单击选择您的网站图标图片以上传您的网站图标图片：
上传图片后，您将在插件中看到相同的界面，您将能够为不同的设备浏览和自定义您的网站图标。
与插件一样，向下滚动到底部并在完成调整后单击生成您的网站图标和 HTML 代码按钮：
第 2 步：将您的 Favicon 包上传到您的网站
在下一个屏幕上，单击按钮下载您的Favicon包：
然后，您需要提取此包并使用 FTP 将其上传到站点的根文件夹（如果您不确定 FTP 是什么，我建议您坚持使用上一节中的插件方法）。
确保将所有文件放在根文件夹中 - 否则将无法正常工作。
第 3 步：将代码片段添加到主题的 <head>
要完成这些工作，您需要将 RealFaviconGenerator 中的代码片段添加到 WordPress 主题的<head>部分：
或者，您可以将以下代码片段添加到子主题中的functions.php文件中（您需要使用子主题）：
/* Adds the favicon code snippet from RealFaviconGenerator */
add_action('wp_head', 'add_favicon');
function add_favicon(){
?>
REPLACE THIS LINE OF TEXT WITH FAVICON CODE
<?php
};
任何一种方法都可以！
一旦你这样做了，你就完成了，你的网站图标应该开始工作了。
立即添加您的 WordPress 网站图标
只需几分钟即可添加您的网站图标并为您的访问者提供更具品牌化的体验。
这是伟大的事情：
一旦您将网站图标添加到您的 WordPress 网站，您就不必再考虑它了！
您对如何添加 WordPress 网站图标还有其他问题吗？ 在评论中告诉我们，我们会提供帮助！