Hexo的NexT主题添加favicon

发表于 更新于 分类于

折腾了半天，成功在hexo的NexT主题上应用了站点favicon，记录下具体步骤。

首先要说明的是，中文网站的教程，都是教你把favicon.ico放在theme/next/source/images下，但是现在NexT主题推出npm的安装方式，站点的theme目录下根本没有next文件夹。所以网上的教程早就过时了。

其次，NexT官方博客上的说明极其具有误导性。如果按照它的说明操作，无法怎么设置，都是使用主题自带的图标。具体表现在：

  • favicon图标格式只能使用.ico，才能替代NexT主题自带的图标。而主题设置里却是使用的.png格式
  • 没必要把主题设置里favicon部分全部启用，只使用small和medium即可。

下面是具体设置方法

生成favicon

准备好图片，到这个网站：https://www.bitbug.net/ ,分别生成16x16和32x32大小的.ico文件。

存放favico

把生成的favicon文件放在hexo-site/source/images目录下，images目录如果没有则新建。

修改主题配置文件

编辑_config.next.yml，修改成下面的内容：

1
2
3
4
5
6
7
8
9
10
11
# ---------------------------------------------------------------
# Site Information Settings
# ---------------------------------------------------------------

favicon: 
  small: /images/favicon16.ico
  medium: /images/favicon32.ico
  #apple_touch_icon: /apple-touch-icon-next.png
  #safari_pinned_tab: /logo.svg
  #android_manifest: /manifest.json

注意，放在images目录下的图片名称要和上面配置里的一一对应。

打开网站，强制刷新网站，即可看见效果。