getButterfly Logo getButterfly code wrangling since 2005

Ever had problems with an old browser displaying your favicon? Try this method of selectively adding a favicon for Internet Explorer and all other browsers:

<link rel="icon" href="" type="image/x-icon">
<!--[if IE]><link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /><![endif]-->

And don’t forget to place your favicon file in the root. Even if you don’t specify it, some browsers look by default for favicon.ext files. Try to use .png for your favicons. Try to simplify their colours before scaling down a logo or a symbol. It’s small (16*16) and too many details can harm its visibility.

*.ext = extension (could be .ico, .png, and .gif with some older websites… and webmasters)

Subscribe to getButterfly Blog

Once a week or so we send an email with our best content. We never bug you, we just send you our latest piece of content.

If you found any value in this post, agree, disagree, or have anything to add - please do. I use comments as my #1 signal for what to write about. Read our comment policy before commenting! Comments such as "Thank you!", "Awesome!", "You're the man!" are either marked as spam or stripped from URL.

3 thoughts on “Adding A Compatible Favicon – The Right Way

  1. That’s good advice about simplifying a logo / identity symbol for the icon as the area is so small that it really needs to be simplistic in design so that there is enough visual clarity to make changing the icon worth while. Thanks for the helpful tip.
    .-= MJ Stapleford Corporate Identity’s last blog ..Logo Design for Company based in Bristol =-.

  2. A favicon (short for favorites icon), also known as a shortcut icon, website icon, URL icon, or bookmark icon is a 16×16 or 32×32 pixel square icon associated with a particular website or webpage.

    Favigen is a Favicon Generator which will allow you to create a favicon for your website.

Leave a reply

Love programming?

Learn about the most amazing things. Get smarter everyday!