2

I am creating a static site using the Hugo static site generator with the Novela theme. I have a favicon which I have added to the static folder of the website. I have also updated the themes/layouts/partials/header.html to include the required links but I'm still seeing the logo from the default instead of the one I have added.

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>
Ayush Baweja
  • 21
  • 1
  • 4
  • Make sure your favicon loaded into network tab. – Devang May 01 '20 at 12:30
  • @Devang I see 2 favicon.svg files, one of which is showing a 404 error. The default site had an svg for the favicon but I had replaced it with my own .ico and .png. How do I solve this? – Ayush Baweja May 02 '20 at 08:07
  • 404 error means your path is incorrect. – Devang May 05 '20 at 05:21
  • Does this answer your question? [What is currently the best way to get a favicon to display in all browsers that support Favicons?](https://stackoverflow.com/questions/37073/what-is-currently-the-best-way-to-get-a-favicon-to-display-in-all-browsers-that) – user26742873 Sep 26 '20 at 08:11

1 Answers1

1

The favicon might be cached. You can try viewing the page in an incognito window or you can add a query string to the end of the name to force a refresh. Eg:

<link rel="icon" href="/favicon.ico?v=2">
David
  • 41
  • 1
  • 7
  • This helped remove the cache but now I'm seeing the default earth favicon (Google Chrome), not the ones in my static folder. – Ayush Baweja May 02 '20 at 10:32