如何向您的 WordPress 网站添加 Favicon

已发表: 2020-05-06

Favicon 或收藏夹图标是浏览器选项卡上页面标题旁边的小图像。 此站点图标在建立您的网站身份方面起着至关重要的作用。

如果您拥有专业网站,请考虑使用网站图标(如果您还没有的话)。 在这里,我们将讨论它的重要性以及准备一个时要考虑的事项。 我们还将向您展示有关如何向 WordPress 网站添加网站图标的三种方法。

为什么要使用 Favicon?

为了证明网站图标的重要性,请看下面的屏幕截图。

最喜欢的图标示例

如您所见,每个选项卡都有不同的图标来区分您正在访问的网页。 当您的浏览器上有一堆标签时,网站图标可帮助您识别这些页面。 因此,它创造了更好的用户体验。

收藏夹图标不仅在浏览器选项卡中有用。 当用户将页面快捷方式添加到其移动主屏幕或桌面时,屏幕上将显示该图标。 最重要的是,网站图标的工作方式类似于徽标。 当人们看到它时,他们会立即认出您的网站和品牌。

准备你的网站图标

创建网站图标最快捷、最简单的方法是使用网站图标生成器。 不需要任何技术知识,因为它们中的大多数都提供现成的图像,您只需稍作调整即可。

也可以考虑使用您品牌的徽标,但要确保可以将其裁剪为方形图标。 它也必须看起来足够简单,尽管它的尺寸很小,但您可以清楚地看到它。 使用 Photoshop、DesignWizard 或 GIMP 等图像编辑程序来修改和调整徽标的大小。

对于图像的格式,建议使用 ICO 文件,因为大多数浏览器都支持它。 但是,并非所有照片编辑软件都允许您创建 ICO 文件。 因此,最好使用提供该选项的在线图标生成器。 或者,将您的图像保存为 PNG 并使用在线 ICO 转换器。 通常,大小必须为 16 x 16 像素。

如果您使用 WordPress 4.3 的站点图标功能,则无需担心事先转换图片。 您现在可以上传任何图像文件作为您的收藏图标。 无论如何,请始终确保上传后可以在任何浏览器中查看。

向 WordPress 网站添加 Favicon 的 3 种方法

您可以通过三种方法向网站添加网站图标,选择您喜欢的选项。

选项 1:WordPress 定制器

对于 WordPress 4.3 用户,使用站点图标功能是添加收藏夹图标最方便和推荐的方式。

准备一个高度和宽度都至少为 512 像素的方形图像。 该文件不应超过 128 MB。 如果您有矩形图像,它们将允许您在上传favicon 时对其进行裁剪。

准备好图像后,请按照下列步骤操作:

1. 打开您的 WordPress 仪表板,转到外观,然后选择自定义。

2. 查找包含站点图标的选项卡。 大多数主题都会在站点标识中包含它,但有些主题会将选项卡重命名为站点标题、品牌名称、站点徽标和标题等。

自定义侧面标识

3. 选择站点图标并从您的媒体库中选择一个图像或上传一个新文件。

4. 您将进入裁剪图像编辑器。 根据需要调整位置和比例。

裁剪图像

5. 恭喜! 你应该有一个新的图标。 如果它还没有出现,WordPress 建议清除缓存并重新启动浏览器。

选项 2:使用插件

如果你还没有更新你的 WordPress,你可以使用插件来添加一个 favicon

一些插件让您可以更好地控制网站图标在非桌面设备上的外观。 例如,RealFaviconGenerator 的 Favicon 为您提供了在不同操作系统中自定义图标外观的选项。

要使用该插件,请执行以下步骤:

  1. 转到插件并单击 WordPress 仪表板上的新增。
  2. 通过 RealFaviconGenerator 搜索 Favicon,然后安装并激活插件。
  3. 选择外观并单击仪表板中的Favicon 。 上传大于 70 x 70 像素的方形图片。 理想情况下,图片应为 260 x 260 像素或更大。
  4. 您将被重定向到一个页面,您可以在其中设置您的网站图标在 iOS、Android Chrome、Windows 和 Safari 中的外观。 然后单击生成您的收藏夹和 HTML 代码。
适用于 android chrome 的图标

除了该插件,您还可以使用 All in One Favicon。 该插件允许您为后端和前端设置不同的图标。 这样,当您的网站和仪表板都打开时,您就不会感到困惑。

选项 3:通过 FTP 客户端手动安装

另一种方法是手动将您的网站图标上传到您的 WordPress 网站。 为此,您需要将您的网站连接到 FileZilla 等 FTP 客户端。 您的图标可以是 ICO 或 PNG 格式,并应命名为 favicon。

还强烈建议您创建子主题以使用此方法。 这样,当有新的主题更新时,您的代码更改不会被删除。

连接您的站点后,请执行以下步骤:

  1. 通过您的 FTP 客户端将您的图标文件上传到您当前的主题文件夹。 如果您使用的是子主题,请将其上传到该文件夹​​。
  2. 将相同的文件添加到您的根目录。 它应该与您的 wp-content 和 wp-admin 位于同一文件夹中。 这是为了确保您的收藏夹可以在提要阅读器中查看。
  3. 在您的 WordPress 仪表板上,转到外观并单击主题编辑器。
  4. 现在,如果您有 ICO 文件,请选择 Theme Header 文件并在标签内添加以下代码:

<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico” />

用你的根目录的路径替换 href= 之后的部分,直到 /favicon.ico。 它看起来像这样:

<link rel="shortcut icon" href="<http://www.yourdomainname.com/favicon.ico" />

如果您有 PNG 文件,只需替换文件格式即可。 然后更新文件。

5. 刷新您的网站。 如果它有效,你现在应该有一个新的图标。

对于所有方法,不要忘记检查您的网站图标在移动设备中的外观。 从您的移动浏览器打开您的网站并将该网站添加到您的主屏幕。

虽然它们很小,但网站图标可以提高品牌知名度并创造更好的用户体验。 您可以使用在线收藏夹图标生成器或您选择的任何图像编辑软件来创建您自己的收藏夹图标。 如果您已经有了,只需使用上述三种方法中的任何一种将其添加到您的 WordPress 网站即可。 祝你好运!

阅读更多 WordPress LMS 网站的流行插件和主题