1 起因
今天收到 Google 邮件,提醒我 nimblecode.tech 上有网页无法被编入索引。
![]()
根据邮件连接,我登陆 Google Search Console 后发现,是链接 https://nimblecode.tech/favicon.ico 未被找到。
![]()
通过浏览器访问,确实返回404。
![]()
我在 Hugo 的public/目录下也未发现favicon.ico文件。作为一个前端入门选手,就很奇怪favicon.ico是一个怎样的文件?为什么 Googlebot 会去爬取它呢?
2 favicon.ico 是什么?
通过维基百科了解到如下内容:
Favicon是favorites icon的缩写,亦被称为website icon(网站图标)、page icon(页面图标)或urlicon(URL图标)。
Favicon是与某个网站或网页相关联的图标。网站设计者可以多种方式建立这种图标,而目前也有很多网页浏览器支持此功能。
浏览器可以将favicon显示于浏览器的地址栏中,也可置于书签列表的网站名前,还可以放在标签式浏览界面中的页标题前。
2.1 favicon.ico 的历史
Favicon 功能是一个典型的例子,展示了最初由一家公司引入的非标准功能发展为行业事实标准的过程。
1999年3月微软的 IE 5 浏览器最早将 favicon 用于收藏夹功能,便于用户在 “收藏夹(Favorites)” 列表中更容易区分和识别他们收藏的网站。“favorite icon” 这一名称也由此而来。但是这种实现也会产生一些隐私问题的副作用——网站拥有者可以通过日志确认多少人下载了favicon.ico文件,进而知道多少人将他们的网站加入收藏夹。
后来,随着 Mozilla Firefox、Opera、Safari等浏览器相继支持 favicon,它的用途也从最初的“收藏夹图标”扩展到了:
- 浏览器地址栏
- 浏览器标签页(成为快速识别网站的主要方式)
因为用途的增加,之前的隐私副作用随之消失。favicon.ico 也随之变为行业的事实标准。
3 生成 favicon.ico
文件后缀.ico是一种在Windows系统上图标文件使用的位图格式,当初并没有注册成为一个 MIME 类型。但到了2003年,格式.ico终于在IANA获得注册,其 MIME 类型是 image/vnd.microsoft.icon。
生成.ico文件的方式有很多种。例如https://favicon.io/,选择对应的原始文件类型进行生成即可:
![]()
3.1 favicon.ico 其他格式
历史上最初使用的是.ico文件格式,通常是 16 * 16 像素的小图像。现在的浏览器也支持 PNG、GIF 甚至 SVG 等其他格式,并且需要不同大小的图标来适应各种设备和用途(例如 32 * 32、64 * 64,以及用于移动设备主屏幕的更大尺寸)。
4 Hugo 配置 favicon.ico
Hugo 配置 favicon.ico 文件很简单,只需两步完成。
4.1 放置 favicon.ico 文件
将需要使用的favicon.ico文件放在 Hugo 的public/目录下。
![]()
4.2 修改 Hugo 配置文件
Hugo的配置文件分为.toml与.yaml两种类型,例如:config.toml或hugo.yaml。
配置文件config.toml需要添加内容如下:
# ... 其他元数据
[params]
favicon = "/favicon.ico"
配置文件hugo.yaml需要添加内容如下:
# ... 其他元数据
params:
favicon: /favicon.ico
完成 favicon.ico 文件的放置与配置文件的修改后,重新编译/部署 Hugo 网站即可生效。
![]()
5 最后
最后,不要忘记 GSC 重新验证。回到问题页面:
![]()
点击“验证修正情况”,重新触发 GSC 进行验证。
![]()
然后静静等待验证结果。