Blog

How to generate a favicon icon for IE7 and gecko browsers

Recently I had an issue trying to get a certain favicon to show up in IE7. It turns out the favicon.ico file I was using was not valid! Now I can’t remember where I generated it from, there are a number of sites out there. So here’s the steps you need to take to create a working favicon in ie7 and other modern browsers.

To set up a favicon on your site:

  1. Create a 32pxX32px or 16pxX16px gif of the image you want (I usually go with 16). Favicons usually work best if they are squared-out.
  2. Next go to http://www.chami.com/html-kit/services/favicon/ ( or any other site, but I find this one created the valid one I needed to get it working in ie7)
  3. Next add this line of code inside the <head> tag of your site:
    <link href=”http://your-website/images/favicon.ico” rel=”icon” type=”image/x-icon” />
    <link href=”http://your-website.com/images/favicon.ico” rel=”shortcut icon” type=”image/x-icon” />
  4. Next you will want to validate your icon here: http://www.html-kit.com/favicon/validator/
  5. Be sure that if your updating an icon or replacing one that you clear your cache: Clearing ie7 cache instructions found here: http://help.isu.edu/index.php?action=knowledgebase&catid=38&subcatid=64&docid=1015

Comment on this article: