Shortcut Icons and IE8

I ran into a problem recently with shortcut icon files not working in Internet Explorer 8, while they were working fine in every other web browser. Shortcut icons are the little images that show up in the address bar of Safari (to the left of the URL), in the browser tabs in Chrome and Firefox (to the left of the site title), or in both places in Internet Explorer 8. They also show up in the bookmarks/favorites lists of most browsers.

They’re in an odd file format called .ico. You can get a dedicated editor to create those, or there are numerous web applications which will take your (for example, PNG) file and create one for you. I like iConvert Icons for this, as they have both a stand-alone and a browser-base version, and the page doesn’t look like it was designed by an engineering student.

The problem ended up being not the icon format but the size. While every other browser was happy with a large (256px by 256px) icon file, Internet Explorer 8 would only accept 16px x 16px.

As I researched this issue, I found lots of sites claiming all manner of things as the fix, including many that claimed the .ico file had to be specified by absolute URL. But none of this proved true. Using the link tag and a relative URL worked just fine, so long as the file was in .ico format and not larger than 16px by 16px. This format worked fine with every browser I tested (IE, Firefox, Chrome, and Safari):

<a href="/path/to/your/icon.ico" rel="shortcut icon" />