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

Question

我正在尝试向以下 hugo 主题添加网站图标：https://github.com/stackbithq/stackbit-theme-fjord The problem is that the documentation points me to a 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 中创建一个头部部分，但这在本地测试时并没有生成网站图标。

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

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

Adding a favicon to an existing hugo theme

html

themes

hugo

netlify