Html Question posted in
Some basic documentation can be found here.

Html – Favico Not Showing Until Cache is Cleared Every Time

I have a page where the index.html has a head tag, which contains a link tag with a favico.svg:

<link rel="manifest" href="./manifest.json">
<link rel="shortcut icon" type=“image/x-icon” href="./images/Site_Favicon.svg">
<link rel="icon" type=“image/x-icon” href="./images/Site_Favicon.svg">

and in manifest.json I have:

"icons": [
    {
      "src": "./images/Site_Favicon.svg",
      "sizes": "any",
      "type": "image/svg+xml"
    }
  ],

The SVG file is lovated in a public folder, in an images subfolder.

The icon loads fine everytime the page loads, but everytime a link is clicked a new tab opens (same site, just different page) the favicon fails to load.

If I clear the site cookies and cache and reload the new tab, the favicon shows up. If I close the new tab, then reopen it, the favicon is gone until I clear everything again.

So when I open a link off of the main page in a new tab, I have to clear the site cookies and cache to get the icon to show every single time.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Adding the %PUBLIC_URL% to fetch the icon from the public folder did the trick:

    <link rel="shortcut icon" href="%PUBLIC_URL%/images/Site_Favicon.svg">

  2. 0

    If you’re developing locally a hard refresh will do. If it’s on a server that is doing heavy caching you can just trick the browser by passing a param to the href like so <link rel="icon" type=“image/x-icon” href="./images/Site_Favicon.svg?v-2">. The browser will think it’s a new file.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search