自从换成 Hugo 来建个人站点后，用得挺爽，就是一个小问题让我困惑了好久：如何更换静态站点添加 Favicon 图标？

研究以后，终于知道原因：Hugo 站点模板代码里并没有关于这一部分的定义，这一部分的定义是在各个 theme 里来定义的，所以主要是找到需要修改的 theme 里的 Favicon 部分，然后修改掉这部分即可。

我使用的是 hugo-theme-even，修改起来比较简单，具体的实现步骤简单备忘如下：

  1. clone 一份 hugo-theme-even 到自已的 github 仓库，并且确保这个仓库是 public 状态，方便 netlify 等来拉取代码。这样做的目的，是为了保证自已对 even 主题的修改可以保存下来，并且直接应用到不同的子站点。

  2. 在自已的 hugo 博客仓库里，直接使用 git submodules 添加自已的 hugo-theme-even 进来，一般来说直接放到目录 themes/even 下即可。接下来就可以对 even 进行有关 favicon 的修改。

  3. 生成 Favicon 相关的素材：找到一个工具网站来生成 Favicon 的图标及代码，比如说 Favicon Generator 就可以。

  4. 把生成的 Favicon 图标直接放到 themes/even/static 目录里，替换掉原来的资源，如果是其它 Hugo 主题，存放的位置大概率是一样的。

  5. 把 theme/even 目录下的 /layouts/partials/head.html 文件，查找到下面的一行或是直接添加一行：

1

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

然后修改为

1

<link rel="shortcut icon" href="favicon.ico" />

提交全部修改，然后 netlify 就会愉快地重新生成站点并替换为新的 Favicon 图标。

参考资料：

  1. 利用 Favicon 为 Hugo 静态站点添加图标