Favicon not showing up in Google Chrome browser

Question

For some reason my favicon is not showing up on my chrome tab. From all the articles I have read I am writing the code correctly. It does work in Firefox. I also cleared my cache and tried an incognito window and am still not seeing it.

When I go to: localhost:8080/favicon.ico I do see the favicon.

Here is my code within the HTML header:

<link rel="shortcut icon" sizes="16x16 32x32 64x64" 
href="/favicon.ico" type="image/x-icon" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="apple-touch-icon.png" />

Any help would be appreciated! Thanks!

Solution 1

Try doing a favicon cache reset as explained in #3 here

3. FAVICON CACHE RESET

A more drastic way to solve the problem, but that allows you to do it globally rather than site-by-site, is to clear the browser’s favicon cache. The procedure is:

• on Mac: delete the following file

  ${user.home}/Library/Application Support/Google/Chrome/Default/Favicons
  

• on Windows: delete Favicons-journal and Favicons files from the following location

  C:\Users\nomeutente\AppData\Local\Google\Chrome\User Data\Default
  

In both cases, a browser restart is suggested.

Solution 2

You should link your favicon.ico like below:

<link rel="icon" href="wherever/your_icon/is?v=1.0" />

The thing is that, chrome could not find it for the first time and now it's assuming you don't have one as it renders from cache. The ?v=1.0 part makes sure that chrome loads it again.

Solution 3

right-click on file (the favicon), go to properties, look towards the bottom and you will see attributes and the option to unblock the file, and unblock it. Worked immediately with browser-sync Blind luck, I wasn't even expecting it to be there.