I'm trying to include a favicon on an HTML page and I've spent the past couple of hours trying to figure this out. The favicon shows up on Firefox, but not on IE, Chrome or Edge. I'm launching the site from a local file (so it's not hosted anywhere).
Here is the code for the favicon I have - this is the only one that works and then only in Firefox:
<link rel="shortcut icon" type="image/png" href="/favicon-32x32.png?v=2"/>
<link rel="shortcut icon" type="image/png" href="/favicon-16x16.png?v=2"/>
<link rel="shortcut icon" href="favicon.ico?v=2" type="image/icon">
<link rel="icon" href="favicon.ico?v=2" type="image/icon">
For reference, I've tried the answers at the following questions, to no avail unfortunately:
Things I have tried:
I have emptied the cache a number of times on Chrome, but that didn't help at all!
I've also substituted the favicon for a different image and it doesn't work on this page, although that favicon definitely works on another completely separate page.
Removing the preceding slashes in the 'href', but that doesn't work either
Changing the 'href' to point to my downloads folder as suggested by this bug from this question
As suggested in the accepted answer of the above-linked question, I have changed the icon reference to <link rel="shortcut icon" href="http://cdn.sstatic.net/stackoverflow/img/favicon.ico"> to see if the StackOverflow icon was displayed - again Chrome didn't show anything, but interestingly neither did Firefox.
The other thing I should mention is that the favicons are all stored in the root folder, so there's no URL problems!
Seems like this is a bug for locally hosted sites on Chrome? https://bugs.chromium.org/p/chromium/issues/detail?id=51270