如何将 favicon 添加到 Hugo 网站

Question

我正在使用带有 Novela theme 的 Hugo 静态站点生成器创建一个静态 site。我有一个网站图标，已添加到网站的静态文件夹中。我还更新了 themes/layouts/partials/header.html 以包含所需的链接，但我仍然看到默认徽标而不是我添加的徽标。

header.html：

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

<Section class="section">
  <div class="nav-container">
    <a class="logo-link" href="/">
      {{ partial "icons/ui/logo.html" . }}
      <span class="header-hidden">Navigate back to the homepage</span>
    </a>
    <div class="nav-controls">
      <button id="copyButton" class="icon-wrapper">
        {{ partial "icons/ui/link.html" . }}
        <div id="toolTip" class="tool-tip " >
            copied
        </div>
        <input id="copyText" style="opacity: 0;" type="text" class="tool-tip " />
      </button>

      <button id="themeColorButton" class="icon-wrapper"> 
        <div id="sunRays" class="sun-rays"></div>
        <div id="moonOrSun" class="moon-or-sun"></div>
        <div id="moonMask" class="moon-mask"></div>
      </button>
    </div>
</div>
</Section>

{{ $script := resources.Get "js/toggleLogos.js" }}
<script src="{{ $script.RelPermalink }}"></script>

{{ $script := resources.Get "js/toggleColors.js" }}
<script src="{{ $script.RelPermalink }}"></script>

{{ $script := resources.Get "js/copyUrl.js" }}
<script src="{{ $script.RelPermalink }}"></script>

Answer 1

网站图标可能被缓存。您可以尝试在隐身窗口中查看页面，也可以在名称末尾添加查询字符串以强制刷新。例如：

<link rel="icon" href="/favicon.ico?v=2">