更换Hexo网页图标favicon

说明

本文介绍如何通过 主题配置文件 修改 Hexo 网站的 favicon（网页标签页的小图标）。

除了这种方法，还可以在 Hexo 根目录下统一设置 favicon。尽管这种方式无需对每个主题单独配置，但由于以下原因未采用：

1. 标签页图标的颜色与样式需要与主题（theme）风格匹配，才能更加美观。
2. 尝试在 Hexo 根目录的配置文件中设置 favicon 时，未成功生效。

本文以修改主题 Next 的 favicon 为例，展示具体操作步骤。

---

效果预览

修改前（Next 主题默认图标）：

修改后：

---

制作 favicon 图标

1. 准备一张合适的图片，用作标签页/网页的小图标。
2. 使用在线工具将图片转换为 favicon 图标。

在线工具推荐

我使用了 Bitbug 进行转换。支持生成多种尺寸的图标。

生成了以下两种尺寸：

• 16x16 像素
• 32x32 像素

---

修改配置文件

1. 放置图标文件

将生成的 favicon 图标文件保存到主题目录下的 source/images/ 文件夹中。例如：

• favicon16.ico
• favicon32.ico

2. 编辑主题配置文件

打开主题目录中的 _config.yml 文件，找到 favicon 配置项，修改为新的图标路径：

favicon:
  small: /images/favicon16.ico
  medium: /images/favicon32.ico

3. 本地预览

保存配置文件后，运行以下命令生成静态文件并启动本地预览：

hexo clean && hexo g && hexo s

在浏览器中访问本地地址，查看 favicon 是否更换成功。

4. 发布到远程服务器

如果本地预览正常，运行以下命令将更改发布到远程分支：

hexo g && hexo d

---

注意事项

1. 如果修改后图标没有生效，可以尝试清除浏览器缓存。
2. 确保图标文件的路径与配置文件中的路径一致。
3. 如果仍未生效，请检查主题是否覆盖了 favicon 的设置，或 Hexo 根目录是否存在干扰配置。

---