Cross Browser  Favicons

Once you have a 16px by 16px PNG, GIF, JPG or ICO file adding a favicon, or favorite icon, to your website is easy. On the other hand it will take a few extra steps to comply with all browser’s.

If you need to convert an icon to .ico I’d suggest the Project Fondue Favicon Generator, it’s a no-bullshit tool that’s simple.

All Major Browsers

Depending on the type of file you’re using one of the following is the standard way to add a favicon in well-built web browsers.

<link rel="icon" type="image/png" href="https://www.example.com/image.png">
<link rel="icon" type="image/gif" href="https://www.example.com/image.gif">
<link rel="icon" type="image/jpeg" href="https://www.example.com/image.jpg">
<link rel="icon" type="image/vnd.microsoft.icon" href="https://www.example.com/image.ico">`</pre>

Internet Explorer 7 & Below

MSIE does NOT support PNG, GIF and JPEG type icons, only ICO files. After you have the ICO file you can use the following code to add a favicon in IE5, IE6 or IE7.

<link rel="shortcut icon" href="https://www.example.com/image.ico" />
<link rel="address bar icon" href="https://www.example.com/image.ico">

Cross Browser Approach

The best cross browser approach I’ve found assumes that you have a PNG, GIF or JPEG for major browsers, and a fallback ICO file to use for IE7 and below.

<link rel="icon" type="image/png" href="https://www.example.com/image.png">
<!--[if IE]><link rel="shortcut icon" href="https://www.example.com/alternateimage.ico"/><![endif]-->

Notable Resources