1

I have done a lot of digging, but I can't seem to get a favicon working for IE11. I can get one working in Chrome and Firefox though.

Here is the head of my file:

<head>
    <title>Home</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script src="../jquery.min.js"></script>
      <script src="../levelOneImports.js"></script>  
      <link rel="shortcut icon" href="../Iconleak-Cerulean-Science-chemistry.ico" type="image/x-icon">
</head>

Here are the different approaches I've tried:

  • I have a favicon (ico and png) that I created, but after I couldn't get it to work, I just tried downloading ones to test off of the internet (here is one).
  • I read in another post that IE11 should support png favicons, so I tried using a png file rather than an ico file.
  • I read in another post that the image should not be in a subfolder, so I changed the location and put it in the root.
  • I read that the image needed to 16x16, so I tried creating a ico file that had those dimensions. I also tried downloading a png file with those dimensions.
  • I tried clearing the IE cache. I also tried clearing the cache and restarting the browser.
  • The latest code solution is the one I tried above (from this post here).
  • I also tried this: <link rel="icon" type="image/png" href="../logo.png"> using the solution from the post here.

I am not sure what I could be doing wrong. Any suggestions? If you could provide an example of some code where it works in IE too, that would be great.

Don't know if this helps, but I'm not too concerned with anything prior to IE11.

JustBlossom
  • 1,259
  • 3
  • 24
  • 53

2 Answers2

1

Even if you cleared the cache, IE11 might still use the cached version. This is an unfortunate, well known-behavior.

A non-exhaustive checklist:

  • In IE11, open the developer console and look for errors. You might typically discover a 404 error while accessing the icon.
  • Version the icon by adding a query string to the URL. For example, in your HTML code, change the icon path to ../Iconleak-Cerulean-Science-chemistry.ico?v=2. This should force IE11 to reload the icon.
  • Test your site with the favicon checker. Full disclosure: I'm the author of this service.
philippe_b
  • 38,730
  • 7
  • 57
  • 59
  • I haven't gotten it to work yet, but that checker is pretty useful. I was thinking about it...I am testing this locally (not on a server yet). Could that be the cause of the problem? – JustBlossom Jun 04 '17 at 13:48
  • Oh, sure, this is a likely suspect. Serving your site with a local web service might well fix your issue immediatly. – philippe_b Jun 04 '17 at 15:30
0

You can change it with JavaScript. It may not be the best answer, but it should work. Be sure to check the link below and their example. Let me know how this works for you:

How to force ie11 to request a new favicon?

RDumais
  • 171
  • 8
  • No, that didn't work. I added the link to the head and added the javascript in script tags under it in the head as well. Should I place the javascript somewhere else? – JustBlossom Jun 01 '17 at 23:36
  • Check out what philipp_b is saying. I agree that it may be a cache issue. If that doesn't work, try putting the just before the

    tag.

     – RDumais Jun 02 '17 at 14:43