通过 2 个简单的步骤将 Favicon(网站图标)添加到 WordPress 网站

https://wpvkp.com/how-to-add-favicon-to-wordpress-in-3-simple-steps/

Favicon 网站图标是一个小图像,它显示在浏览器选项卡中,网站标题的旁边。它是任何网站设计的基本要素之一,因为它有助于在您的网站访问者之间建立权威和信任。但是,大多数新手博主甚至有些专业人士都忘记了这一基本要素。

Favicon 不仅有助于改善网站整体在访客面前的外观,而且还有助于提高可用性。假设您的客户在浏览器中打开了许多选项卡;如果您拥有经过适当设计且具有品牌形象的网站图标,那么您的客户肯定立刻找到您的站点。

根据万维网联盟 World Wide Web Consortium 的说法,Favicon 是一个与网站相关的图像。最适合的格式是 PNG、GIF 或 ICO,建议使用 8 位或 24 位颜色。

现在的问题是:如何添加 favicon 到您的 WordPress 网站?

接下来你就会知道如何操作了。


步骤 1:在 Photoshop 中创建一个图标

我们的首要步骤是创建一个图标,以便我们可以将其上传到您的 WordPress 网站。 为此,我将使用 Photoshop。

如果您没有(购买)Photoshop,则可以尝试使用 GIMP,它是最好的开源图形设计软件之一。

Photoshop的“新建文件”窗口
打开 Photoshop 后,您需要创建一个新文件,并进行设置:

  • 宽度:512 像素
  • 高度:512 像素
  • 分辨率:72 像素/英寸
  • 颜色模式:RGB 颜色(务必选择 RGB 颜色)
  • 背景内容:透明
  • 像素长宽比:方形像素(若不是 “方形像素” 则可能会出现奇特的现象)

然后点击创建按钮。

一个新的Photoshop文件

接下来有两个选择:

  • 你已经有了一个图标,想添加进去:请看步骤 1.1。
  • 你还没有设计图标:请看步骤 1.2.

步骤 1.1:将现有图标放在文件中

现在找到你的网站的图标,并将其拖拽进您新建的图像中。
拖拽四角,确保您的图标中的图形部分(因为有些图标是图形和文字混合的)在画面中间并填满。
如果您认为可以了的话,按下小键盘的 Enter 回车键即可。

编辑过的图标
然后,继续看步骤 1.3。

步骤 1.2:创建一个新图标

你可以在网上找到很多 “免费设计 LOGO” 的工具/网站,具体使用方法因工具而异,大体来说,操作流程为:

  • 输入你的网站名称,
  • 翻阅 LOGO 列表,
  • 找到你喜欢的 LOGO,
  • 保存下来。

然后,继续看步骤 1.1。

步骤 1.3:保存您的图标

设计完成后,您需要按键盘上的 ctrl + alt + shift + s 键,打开 “存储为 Web 所用格式” 面板。在右侧的 “预设” 下方的下拉框中选择 “PNG 24”,然后点击底部的 “存储” 按钮。 将打开一个 “将优化结果存储为” 面板,只需键入 favicon 并保存文件即可。

“存储为Web所用格式”面板

步骤 2:将图标放在您的 WordPress 网站上

如果您使用的主题符合 WordPress 设计规范的话:

  • 登录到你的 WordPress 网站后台。
  • 现在,将光标放在 “外观” 菜单上。
  • 点击 “自定义”。
  • 页面完全加载后,点击 “站点身份” 菜单项。
  • 在 “站点图标” 部分下,点击 “选择站点图标” 按钮。
  • 上传您在第一步中制作处的图标,然后单击选择按钮。
  • 如果要求裁剪图像,将虚线框拖拽至图标的完整大小(可在右侧看到实际的效果)。
  • 点击 “发布” 按钮。
  • 就这样。

如果您使用的主题拥有自己的 “主题设置面板”,则需要到主题的设置面板处查找有关 “LOGO” 或 “图标” 的设置项,并参考上述步骤操作。

恭喜,您已经成功将站点图标添加到您的 WordPress 网站中!

一些常见问题的解决方案

在大多数情况下,将新图标上传到您的网站后,您不能立刻就能在浏览器的标签上看到它。

其背后的原因非常简单,那就是缓存。 对网站的设计进行更改后,非常有必要清除网站的缓存。 如果您正在使用任何代理缓存引擎,例如 FastCGI 或类似的东西,则还需要刷新其缓存。如果您正在使用 CDN,也不要忘记刷新 CDN 的缓存。

如果您在服务器上使用 nginx FastCGI,则可以使用以下命令刷新其缓存:systemctl reload nginx。 只需确保以 root 用户身份登录即可,或者您可以尝试使用以下命令:sudo systemctl reload nginx

结论

正如您在本教程中所看到的,创建一个 favicon 并将其添加到网站真的很容易。 执行本教程中的所有步骤所需的最长时间不到 45 分钟。

如果您不满意自己创建的站点图标,可以使用一些免费的在线工具(如 favicomatic 和 favikon)帮助。 这两个网站都非常易于使用,并允许您对图像执行基本操作。 此外,它们能帮助您创建各种不同大小的 favicon,从而为您提供与不同设备和平台的最大兼容性。