How to add a Favicon to my site ?

Posted on: June 16, 2008
13 comments so far (is that a lot?)

What is a Favicon

Favicon is short for “Favourites Icon”. The name is derived from the bookmark list for Microsoft Internet Explorer which is called Favourites list. When you add a site to your Favourites list, Internet Explorer (version 5 and above) asks the server if it has a file called favicon.ico. If present, this file will be used to provide an icon that is displayed next to the bookmark text.

Other browsers such as Mozilla have also added support for favicons. Depending on the browser, the favicon can appear in a variety of places, not just in the bookmarks list (in fact, it may not even appear in the bookmark list at all). It may be shown in the address bar or the title of a browser tab, for instance.

How to create a Favicon

To create a favicon.ico simply create a 16×16 .PNG or .GIF file and convert it to an icon resource with Chami. If you want, you can add more images to the same icon resource to provide alternative resolutions. Most browsers only use a 16×16 image but in a different context (e.g. when you drag a URL from the address bar onto your desktop) a larger icon may be shown. If the icon resource only contains a 16×16 image, this will be scaled to the appropriate size, so technically there is never a need to add alternative resolutions. However, doing so can increase the quality of the displayed icon.

Keep in mind that for a user with a slow modem a favicon.ico may increase the page loading time by a few seconds if it is too large, so don’t overdo it. Adding a 32×32 alternative should be enough to make sure the image will look good even in contexts with larger icons. Adding even more and larger alternatives is unnecessary bloat. Try to keep the number of colors below 16 and create a 16-color icon using the --colors 16 switch of png2ico (or even create a b/w icon with the --colors 2 switch). This will result in a smaller file that loads faster.

When you create the images to include in your favicon.ico, don’t forget that the icon may be composed against various background colors so you should use transparency rather than a solid background if you want to avoid that your icon appears inside a box. Note, that icon resources only support binary transparency, i.e. a pixel may be visible or invisible but not something like 30% translucent.

Installing your Favicon

To add your new favicon.ico to a web page put it on the server into the same directory as the web page it is for (e.g. www.example.com/foo/favicon.ico for www.example.com/foo/index.html). That is the first place a browser will search. If it doesn’t find an icon there, it checks the top-level directory of the server (www.example.com/favicon.ico for the www.example.com server), so by putting it there you can have a default favicon for all the pages in your domain. Depending on browser and configuration, the favicon.ico is not always rendered, even if it is in one of the above locations, unless the web page explicitly declares its presence. To declare that your web page has an icon, you add the following 2 lines into the <head> section of your page:

<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

http://easily.co.uk/how-to-add-a-favicon-to-my-site.html

Register with the UK’s top domain name & hosting provider, over 10 years exceptional service & technical support.

http://easily.co.uk

Be Sociable, Share!
No TweetBacks yet. (Be the first to Tweet this post)

13 Responses to “How to add a Favicon to my site ?”

  1. simone Says:

    i have followed all instructions and my favicon still is not appearing…please help~! thanks in advance.[x]

  2. admin Says:

    Hi Simone,

    Actually you did succeed, I can see a small portrait (I suppose yours) as the favicon of your site (on Internet Explorer 7 and Firefox 3).
    You might just need to refresh your cache, delete all history and cookies which can reffer to the old site.
    If you try it on a machine which has never browsed your website before, you’ll see it properly.

    If you don’t refresh your cache, it should appear in a couple of days anyway, depending of your browser settings. I’m going to post something about how to refresh your cache.
    Beautiful website by the way :-)

  3. Xephia Says:

    Hi there. I’m trying to add a favicon to my website, and I’m following your instructions perfectly. I converted it using Chami, uploaded it to my site and added the two lines of code.

    When that didn’t work, I edited the ‘favicon.ico’ part so that it had the icon’s full address. That still didn’t work, so I tried moving the favicon from the images folder and into the same folder as the index, which still didn’t work.

    Do you know what it is that I’m doing wrong?

  4. admin Says:

    Hi Xephia,

    If you website is http://hedgewytchherbs.net23.net then I can see your favicon in Firefox and Internet Explorer 7, are you still experiencing this issue?

  5. Jack Says:

    Hello,
    I am having problems with the downloadable file. When attempting to open it, I am told it is corrupt. I have tried opening it in a variety of other programs, but I am again told that it corrupt, or I recieve random symbols. If you could be of any assistance, thanks.
    -Jack

  6. admin Says:

    Hi Jack,

    Are you refering to your .ico file, generated by Chami (http://www.chami.com/html-kit/services/Favicon/) ?
    Chami generates a zip file that you can download. In this zip file you should have a .ico, a .gif and a .txt.
    Technically you can’t open the .ico with any basic image editor, .ico are not done to be editable.
    Make sure you have your image right before uploading it on Chami. Once the .ico is generated, just upload it on your site as explained above.

  7. Jason Says:

    I have tried and tried to follow steps provided by yourself and others but i can’t seem to get my favicon to work…my problem is not uploading the favicon but placing the lines into the Head section…i just don’t know where that is and how to access it….Pls Help!

  8. admin Says:

    Hi Jason,

    I can see your Favicon in my address bar in Firefox and Internet Explorer, you might just have a cookies issue, preventing you from seeing it. Try to clear your cookies and Internet History and you should see it soon..

  9. sheeba Says:

    i did everything u have asked to do…but still cant c my favicon on my site…cache deleted as well…i am using ie 8….what could i be doing wrong

  10. admin Says:

    Hi Sheeba,

    It appears correctly in Firefox but not in IE.
    The reason is that you seem to be using the favicon.png, which is supported in Firefox but not Internet Explorer.
    You’ll need to upload the file favicon.ico in the same folder than your .png file, to make it work in IE 7/8..

  11. rosostrov.ru Says:

    I enjoyed this! Well done!

  12. Manda Mase Says:

    Am I able to achieve results immediately or will it take a while to show up?

  13. admin Says:

    Depending of your browser, usually a couple of page refresh do the trick, but you can try to clear your cache and restart your browser to see it.

Leave a Reply