2

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!

Community
  • 1
  • 1
Often Right
  • 427
  • 1
  • 9
  • 22
  • Perhaps the problem is with the icon itself? – Ahmad Alfy Jul 31 '16 at 04:54
  • @AhmadAlfy I had that thought as well, so I tried using the icon in another completely separate page and it worked. I also tried substituting an icon from that page (which I know works fine in Chrome) and it didn't show up on this page, so there's definitely something wrong with the code somewhere – Often Right Jul 31 '16 at 04:55
  • Have you tried putting them in a minimal apache install and test it there? – Usi Jul 31 '16 at 04:56
  • @JeffreyColeman I wouldn't have a clue of how to do that, but I'll look into it - thanks for the suggestion! – Often Right Jul 31 '16 at 04:57
  • if you're using eclipse there's a wizard for making a simple http server – Usi Jul 31 '16 at 04:57
  • Start a simple web project – Usi Jul 31 '16 at 04:58
  • @JeffreyColeman I'm a Notepad++ user; works fine for my needs! Thanks for the suggestion though :) – Often Right Jul 31 '16 at 04:58
  • Have you tried converting the favicon to `base64`? I've done that to my personal site. – tcasey Jul 31 '16 at 05:04
  • @tcasey that's the one thing I haven't done - I'll try that now and get back to you... – Often Right Jul 31 '16 at 05:04
  • @OftenRight here's a site I've used before for that http://xaviesteve.com//pro/base64.php – tcasey Jul 31 '16 at 05:06
  • @tcasey just tried it, but didn't work even when I cleared the cache :( Thanks for your idea though! – Often Right Jul 31 '16 at 05:09
  • @tcasey yep! Just copied straight from the site you recommended and it's still not showing in Chrome or IE, but good old Firefox is still displaying it! – Often Right Jul 31 '16 at 05:12
  • Does the favicon show up when you type direct to it from the url? `localhost:8000/favicon.png` – tcasey Jul 31 '16 at 05:29
  • @tcasey I've just tried launching it on localhost - the page displays (without css or js, but that's to be expected), but although I've set the favicon to be in base64 format, it still doesn't show up in Chrome and IE! – Often Right Jul 31 '16 at 05:31
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/118725/discussion-between-tcasey-and-often-right). – tcasey Jul 31 '16 at 05:32

2 Answers2

1

Seems like this is a bug for locally hosted sites on Chrome? https://bugs.chromium.org/p/chromium/issues/detail?id=51270

tcasey
  • 399
  • 2
  • 7
  • This seems the most plausible explanation to me! – Often Right Jul 31 '16 at 05:54
  • Almost solved it (IE still isn't playing ball, but that's to be expected!). I've posted my answer below, but your's actually answers the question better so I'm leaving it as accepted ;) Thanks for your help again! – Often Right Jul 31 '16 at 07:40
0

I found a partial solution from this answer. I've found that if I set the favicon using JQuery, then it'll show up on Chrome (and Firefox), irrespective of whether it's a local file or not. Here's the code:

var link = document.createElement('link');
link.type = 'image/x-icon';
link.rel = 'shortcut icon';
link.href = 'http://www.stackoverflow.com/favicon.ico';
document.getElementsByTagName('head')[0].appendChild(link);
Community
  • 1
  • 1
Often Right
  • 427
  • 1
  • 9
  • 22