favicon not working in IE

user_13465 0
Viewed 116509

I have a site using a custom favicon.ico. The favicon displays as expected in all browsers except IE. When trying to display the favicon in IE, I get the big red x; when displaying the favicon in another browser, it displays just fine. The page source includes and it does work in other browsers. Thanks for your thoughts.

EDIT: SOLVED: The source of the issue was the file was a jpg renamed to ico. I created the file as an ico and it is working as expected. Thanks for your input.

favicon internet-explorer
22 Answers

Right you've not been that helpful (providing source would be have been really useful!) but here you go... Some things to check:

Is the code like this:

<link rel="icon" href="http://www.example.com/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="http://www.example.com/favicon.ico" type="image/x-icon" />

Is it in the <head>?

Is the image a real ico file? (renaming a bitmap is not a real .ico! Mildly different format)

Does it work when you add the page as a bookmark?

user_128700

Did you try putting the icon at the URI "/favicon.ico" ? IE might not know about the link tag way of referring to it.

More info from W3.

Jonathan_Tran_128870

Care to share the URL? Many browsers cope with favicons in (e.g.) png format while IE had often troubles. - Also older versions of IE did not check the html source for the location of the favicon but just single-mindedly tried to get "/favicon.ico" from the webserver.

user_205550

I once used a PNG as a favicon.ico and it displayed in all browsers except IE. Maybe something in the file causes it to not be recognized by IE. Also make sure it's 32x32. Don't know if it matters though. But it's something I had to make sure in order to see it in IE.

Hope it helps. Try to use an ico file from some place else just to see if that works.

user_42040

This work crossbrowser for me (IE11, EDGE, CHROME, FIREFOX, OPERA), use https://www.icoconverter.com/ to create .ico file

<link data-senna-track="temporary" href="${favicon_url}" rel="Shortcut Icon" />
<link rel="icon" href="${favicon_url}" type="image/x-icon" />
<link rel="shortcut icon" href="${favicon_url}" type="image/x-icon" />
user_111600650

Try something like:

Add to html:

  <link id="shortcutIcon" rel="shortcut icon" type="image/x-icon">
  <link id="icon" rel="icon" type="image/x-icon">

Add minified script after tag:

<script type="text/javascript">
(function(b,c,d,a){a=c+d+b,document.getElementById('shortcutIcon').href=a,document.getElementById('icon').href=a;}(Math.random()*100,(document.querySelector('base')||{}).href,'/assets/images/favicon.ico?v='));
</script>

where

  • '/assets/images/favicon.ico' related path to .ico
  • ?v='Math.random()*100' - to force browser update favicon.ico

Before test clear history: (ctr + shfit + del)

user_51886890
Related