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

Question

I'm showing favicons of websites in a list, as <img /> elements.

some websites serve them as:

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

and some serve them as:

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

IE doesn't show the favicons images of those of don't have type="image/x-icon".
I cannot control how websites serves their favicons, so what can I do from my side?

Answer 1

I think the best thing to do is convert them to another format. If you are displaying the icons manually then you could download each, convert it with an image program, and upload it to your site.

If you're doing it automatically you'll need to look at whatever image-handling tools you get on the server-side. If you're using PHP, that'd be the GD or ImageMagick libraries. Just convert to PNG for example, and cache it on your site.

If IE doesn't display .ico files inline with a page, then it's unlikely you're gonna be able to make it display without doing some kind of processing. At the most simple level, you can just read the external images and serve them up as the right mime type, without converting them.

Answer 2

Put this in your apache config or .htaccess file:

AddType image/x-icon .ico