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. 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="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

Meet the Author

Kevin Leary, WordPress Consultant

I'm a freelance web developer and WordPress consultant in Boston, MA with 17 years of experience building websites and applications. View a portfolio of my work or request an estimate for your next project.