my page containing several favicons not showing on internet explorer - .ico files not displaying

Question

I have a site which allows users to enter a web address. The code goes and gets the favicon for the site and saves it. The favicon is then displayed elsewhere on the site.

This all works fine for all versions of Opera, FF, Safari and Chrome, but on any version of IE, it seems that only some show up. The code I'm using to show the favicon is simply:

<div class="pulledFavicon"><img src="img/favicons/amazoncouk.ico" alt="favicon" ></div>

The image definitely exists because you can see it show up on other browsers, but even if you visit the exact url in IE9 it acts like there's no such file.

If you visit the following two URLs on IE9 (or 8 or 7) and then any other browser, you'll see that the image shows up in everything but IE:

http://homestartpage.com/beta/img/favicons/simplybecom.ico

http://homestartpage.com/beta/img/favicons/scissorlabcom.ico

Strangely the one for Facebook works!

http://homestartpage.com/beta/img/favicons/facebookcom.ico

I can't for the life of me see what the difference is!

FYI the problem can be seen in situ at http://homestartpage.com/beta/

Answer 1

Fave icons with the .ico extension are a special kind of image file. They are not meant to be displayed inline with HTML. However, as you are seeing, some browsers have added support for it. Your best bet will be to convert/create the images in a more supported format to be used inline. See http://en.wikipedia.org/wiki/Comparison_of_web_browsers#Image_format_support for which images are supported in what browsers.

Here are some links to the same basic question:

.ico not dislayed in IE? is there any way i can show ico file in IE?

Display an .ico within an image element <img>

IE doesn't show .ico icons in HTML if not served as "image/x-icon"