什么是favicon

favicon，是单词“favorite icon”的缩写，是一个帮助用户在视觉上识别和区分您的网站的小图标。 其主要目的是帮助访问者在打开多个选项卡、书签、快捷方式和地址栏时更轻松地找到您的页面。

转换地址

有这么多的平台、设备、图标格式和尺寸，很难确切地知道你应该怎么做才能在任何地方始终如一地展示你的网站图标/品牌。 这就是为什么有多个图标生成器可用的原因。 只需快速搜索“favicon generator”，就会显示一长串网站，这些网站可帮助创建支持各种平台和设备的 favicon。

我为这个案例选择的是 favicon.io, 同样也可以用 realfavicongenerator.net 来完成。

具体操作

我用的hugo主题是：hugo-theme-stack

我所要做的就是将我需要的图片上传到 favicon.io，然后出现一个包含我需要的一切的 zip 文件。 下载该文件后，我解压了 zip 文件并将内容复制到我的 Hugo 站点的static文件夹中：

按照Hugo Stack官网指引，在config.yaml中修改favicon: /favicon.ico后，我的图标依然没有出现。

于是我复制下载页面上生成的 HTML 片段并将其粘贴到 myblog/layouts/partials/head/custom.html

1
2
3
4

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">

就是这样！希望你们也能成功~