我们在使用 Hugo 生成静态站点时，经常会遇到一些虽不致命，但很不爽的小问题，例如没有自定义站点图标的问题。假如我们跟随了所用主题的默认配置，通常情况下生成的站点要么没有图标，要么直接套用主题自带的图标，这显然无法满足我那强烈的 DIY 欲望。

经常访问本博客的读者可能会注意到，我所使用的 Hugo 主题是一个支持自动切换明暗模式的第三方主题——AutoFuji. 今天在阅读这个主题的说明文档时，我发现原来它是支持 Favicon 图标代码的。于是经过一通简单的操作，我的博客终于有了自己的图标。

为 Hugo 站点添加 Favicon 代码的方法非常简单。首先访问这个网站上传一张图片作为网站图标的母本。其实类似的 Favicon 生成器还有很多，大家可以根据自己的习惯或喜好自由选择，基本功能都是一样的。

图片上传完成后，会自动跳转到参数配置页面。如无特殊需求，保持默认配置即可。点击页面下方的生成按钮生成我们的图标和代码。

生成完成后，点击如图所示按钮下载各类格式的图标包，再将自动生成的 HTML 代码复制到剪贴板。

之后，来到 Hugo 站点的根目录，将刚刚下载的压缩包里的所有文件解压到 /static/ 文件夹下。

用文本编辑器打开 /layouts/partials/favicon.html 文件，清空原有代码，将刚刚复制到代码粘贴进去，保存并退出。

最后，打开 /themes/正在使用的主题名/layouts/partials/head.html 文件（不同主题需要编辑的文件可能不同，例如我所使用的 Fuji 主题就是直接编辑同一目录下的 favicon.html 文件），找到下列代码：

<link rel="shortcut icon" href="xxx" />

将 xxx 替换成 favicon.ico ，保存并退出即可。

此时，我们的 favicon 图标安装工作就宣告完成了。使用 hugo 命令重新生成站点，不出意外的话，就能看到我们刚才上传的站点图标了。