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=”http://www.butterflymedia.ro/favicon.ico” 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)

3 Responses to Adding A Compatible Favicon – The Right Way

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

    Reply
  • 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.

    Reply
  • Exactly, look at my logo and look at my favicon. They’re simple, yet they resemble a lot.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>