将网站图标添加到现有的 hugo 主题答案

【问题标题】：Adding a favicon to an existing hugo theme将网站图标添加到现有的 hugo 主题
【发布时间】：2021-01-26 20:21:32
【问题描述】：

我正在尝试向以下 hugo 主题添加图标：https://github.com/stackbithq/stackbit-theme-fjord 问题是文档将我指向Gatsby.js 示例。

我已经生成了网站图标资源并将它们放置在 /static 中，以下标记需要放置在主题中的什么位置？

<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">

作为参考，我尝试在 header.html 中创建一个 head 部分，但这并没有在本地测试时生成网站图标。

【问题讨论】：

标签： html themes netlify hugo

【解决方案1】：

将行追加到文件components/html_head.html

...
{% if site.params.favicon %}
<link rel="icon" href="{{ site.params.favicon | relative_url }}">
{% endif %}
<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">

【讨论】：

谢谢，看来我使用的是旧版本的模板，它没有提供这部分。