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="http://www.example.com/image.png">
<link rel="icon" type="image/gif" href="http://www.example.com/image.gif">
<link rel="icon" type="image/jpeg" href="http://www.example.com/image.jpg">
<link rel="icon" type="image/vnd.microsoft.icon" href="http://www.example.com/image.ico">`</pre>

Internet Explorer 7 & Below

MSIE does NOT support PNG, GIF and JPEG type icons, only ICO files. To generate an .ice file check out the dynamic drive favicon generator. 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="http://www.example.com/image.ico" />
<link rel="address bar icon" href="http://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="http://www.example.com/image.png">
<!--[if IE]><link rel="shortcut icon" href="http://www.example.com/alternateimage.ico"/><![endif]-->

Notable Resources

About the Author

Kevin Leary is a web developer in Boston, MA specializing in enterprise website design and development, online marketing, and conversion optimization.