favicon not working in IE

C

22

41

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.

Cute answered 23/9, 2008 at 16:19 Comment(2)

Would you mind showing us the html you're using to specify the icon? – Vouch 23/9, 2008 at 16:20

You mean when you navigate to the URL directly, it shows a broken image too? – Veterinarian 23/9, 2008 at 16:22

B

59

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?

Baguette answered 23/9, 2008 at 16:26 Comment(3)

If you haven't made the .ico properly, try using this site to generate a real .ico: favicon.co.uk – Baguette 23/9, 2008 at 16:28

Not sure where I copied n pasted this from - but a good one for IE "Since IE loads your icon out of the Temporary Internet Files folder, it must be able to actually store it there. If you are setting the no-cache directive for the icon file, then IE will not be able to display your icon and will display the default icon instead. You can use Fiddler to verify. " – Champac 8/2, 2013 at 5:27

Setting an absolute path verse a relative path in href feels wrong. What if the image is not publicly available outside the application (prior to publishing)? Or is setting an absolute path the solution to getting it working in IE? I would not consider this the best solution. – Output 29/8, 2019 at 17:45

C

21

In IE and FireFox the favicon.ico is only being requested at the first page visited on the site, which means that if the favicon.ico requires log-in (for example your site is a closed site and requires log in) then the icon will not be displayed.

The solution is to add an exception for the favicon.ico, for example in ASP.Net you add in the web.config:

<location path="favicon.ico">
  <system.web>
     <authorization>
       <allow users="*" />
     </authorization>
  </system.web>
</location>

Clo answered 11/9, 2012 at 16:8 Comment(1)

@yo, +1 for very important knowledge of browsers behaviour deference in the first paragraph of the answer. – Bloodthirsty 23/12, 2013 at 11:10

M

11

 <link rel="shortcut icon" type="image/x-icon" href="FolderName/favicon.ico" />

Your favicon.ico must be placed between head tag
size : 16 X 16
and for Internet Explorer it must be transparent (the outer white part should not visible)

Mukden answered 22/8, 2012 at 5:51 Comment(0)

H

7

Should anyone make it down to this answer:

Same issue: didn't work in IE (including IE 10), worked everywhere else.

Turns out that the file was not a "real" .ico file. I fixed this by uploading it to http://www.favicon.cc/ and then downloading it again.

First I tested it by generating a random .ico file on this site and using that instead of my original file. Saw that it worked.

Hexaemeron answered 18/7, 2013 at 9:23 Comment(2)

I found a combination of the favicon creator link here, and using msdn.microsoft.com/en-us/library/… as a guide PLUS NOT naming it "favicon" as that seemed to clash with other cached icons. "myicon.ico" eventually worked after it driving me mad for ages – Urinalysis 6/8, 2013 at 13:50

Thank you! IE is at it once again! >.< A "broken" .ico file worked both in Chrome and Firefox but not in IE. Used the tool you provided in the link and it worked! – Diaphone 13/11, 2013 at 11:41

B

4

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.

Bentwood answered 23/9, 2008 at 16:28 Comment(0)

P

4

If you tried everything above and it still doesn’t work in IE, check your IIS settings if you are using a Windows Server. Make sure that the HTTP Headers > “Enable content expiration” setting, IS NOT SET to “Expire immediately”

Producer answered 18/8, 2011 at 15:15 Comment(0)

G

4

I know this is a really old topic now, but as it's the first one that came up on my google search I just wanted to add my solution to it:

I had this problem as well with an icon that was supplied by a client. It displayed in all browsers apart from IE. Adding the link or meta tags didn't work, so I started to look at the format of the icon file.
It appeared to be a valid icon file (not just a renamed image), but what fixed it in the end was to convert it to an image, save it as a GIF, and then converting it back to an icon.
Also make sure to clear the IE cache while you're testing.

Goatfish answered 10/7, 2012 at 22:58 Comment(0)

H

2

I had this exact problem and nothing seemed to work. After clearing the browser cache countless times and even updating IE to v9 I found this: http://favicon.htmlkit.com/favicon/

The above link solved the problem perfectly for me!

Hadleigh answered 9/1, 2014 at 15:7 Comment(0)

P

1

None of the above solutions worked for me.

First of all I made sure the icon is in the right format using the website to create favicons suggested above.

Then I renamed the icon from 'favicon.ico' to 'myicon.ico' and added the following code to my page (within the <head> tags):

<link rel="shortcut icon" href="myicon.ico" type="image/x-icon" />

The icon is on the same folder as the page.

This solved the problem for me. The issue behind the scenes had probably something to do with the caching of IE, but I'm not sure.

Pluviometer answered 15/4, 2016 at 10:43 Comment(0)

C

0

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.

Cockshy answered 23/9, 2008 at 16:27 Comment(0)

V

0

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.

Vincenz answered 23/9, 2008 at 16:30 Comment(0)

L

0

this seems to be an ASPX pages problem, I have never been able to show a favicon in any page for IE (all others yes Chrome, FF and safari) the only sites that I've seen that are the exception to that rule are bing.com, msdn.com and others that belong to MS and run on asp.net, there is something that they are not telling us! even world-known sites cant show in IE eg: manu.com (most browsed sports team in the world) aspx site and fails to dislplay the favicon on IE. http://www.manutd.com/favicon.ico does show the icon.

Please prove me wrong.

Lucent answered 8/11, 2012 at 19:50 Comment(0)

M

0

THE SOLUTION :

I created an icon from existing png file by simply changing the extension of the image from png to ico. I use drupal 7 bartik theme, so I uploaded the shortcut icon to the server and it WORKED for Chrome and Firefox but not IE. Also, the image icon was white-blank on the desktop.
Then I took the advice of some guys here and reduced the size of the image to 32x32 pixels using an image editor (gimp 2<<
I uploaded the icon in the same way as earlier, and it worked fine for all browsers.

I love you guys on stackoverflow, you helped me solve LOTS of problems. THANK YOU!

Masterwork answered 26/3, 2013 at 10:34 Comment(0)

D

0

Thanks for all your help.I tried different options but the below one worked for me.

<link rel="shortcut icon" href="/favicon.ico" >
<link rel="icon" type="/image/ico"  href="/favicon.ico" >

I have added the above two lines in the header of my page and it worked in all browsers.

Thanks

Dusty answered 7/5, 2013 at 13:29 Comment(0)

U

0

May be this help others.

For me ICON was not getting displayed in IE, even after following all steps.

Finally I found a note in MSDN Troubleshooting Shortcut Icons.

Verify that Internet Explorer can store the shortcut icon in the Temporary Internet Files folder. If you have set Internet Explorer to not keep a cache, then it will not be able to store the icon and will display the default Internet Explorer shortcut icon instead.

I was using IE in "In Private" mode, once I verified in normal mode.... Fav Icon displayed properly.

Unspent answered 12/7, 2013 at 9:10 Comment(0)

P

0

Regarding incompatibilities with IE9 I came across this blog post which gives tips for creating a favicon that is recognised by IE9.

In an essence, try creating a favicon with the following site: http://www.xiconeditor.com/

Pentamerous answered 19/1, 2014 at 9:14 Comment(0)

L

0

Check the response headers for your favicon. They must not include "Cache-Control: no-cache".

You can check this from the command line using:

curl -I http://example.com/favicon.ico

or

wget --server-response --spider http://example.com/favicon.ico

(or use some other tool that will show you response headers)

If you see "Cache-Control: no-cache" in there, adjust your server configuration to either remove that header from the favicon response or set a max-age.

Lil answered 31/7, 2015 at 13:32 Comment(0)

P

0

Also - certificate errors (https) can prevent the favicon from appearing. The security team changed our server settings and I started getting "There is a problem with this website’s security certificate." Clicking on "Continue to this website (not recommended)." took me to the website but would NOT show the favicon.

Purposive answered 15/2, 2017 at 21:32 Comment(0)

S

0

I'm seeing different behaviors between Windows 10 and Windows Server 2016 and between IE and Edge. I tested using www.microsoft.com.

Windows Server 2016 IE 11:
Favorites: site icon
Address bar: site icon
Browser tab: site icon

Windows 10 IE 11:
Favorites: site icon
Address bar: generic blue-E icon
Browser tab: generic blue-E icon

Windows 10 Edge:
Favorites: site icon
Address bar: no icon
Browser tab: site icon

What's the deal with Windows 10 IE showing the generic icon?

Scute answered 11/4, 2018 at 20:51 Comment(0)

S

0

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" />

Smoot answered 6/3, 2019 at 13:40 Comment(1)

This doesnt answer the question. Your having to rely on an outside variable favicon_url which is generated where? What language is this written in? Some context behind the code snippet would be helpful! – Output 29/8, 2019 at 18:0

P

0

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)

Patnode answered 15/8, 2019 at 5:47 Comment(0)

M

-1

Run Internet Explorer as Administrator. If you open IE in normal mode then favicon will not display on IE 11 (Win 7). I am not sure about the behavior on other version of browsers.

Montagna answered 3/3, 2016 at 6:35 Comment(0)

Recommended topics

Hot tags