100 Tools for open source web development Adding tabs to your site using CSS
Jul 21

You may have noticed that some sites you visit show an icon in the browser header bar, address bar and/or favorites when added. It’s a simple thing to do but suprisingly many people are not aware of how to achieve this.

If you want to see one in action you can go to www.hungerfordwebdesign.com homepage to see it in action (our icon is our branded “eye”).

Firstly you need to create an icon, to do this you will need either:

a) A good quality image package (photoshop/paintshop/fireworks)
b)Any image editor and this link: http://www.html-kit.com/favicon/ This link also creates animated versions!

Basically you need to create an image which is VERY small (16 pixels (px) x 16 pixels (px) ). This will be icon which is displayed. Some situations will display this icon at 200% (32px x 32px) so check that your icon displays ok at this resolution as well.

If using an editor that allows you to save in a .ico format then this is ultimately what you want. Save your .ico file as favicon.ico (although you can call it whatever you want,it is known as a favicon - FAVorites ICON).

If you are using MSPaint or an editor which does not allow you to save in an ico format then simply save it as a bitmap (.bmp) and then upload the file when you follow the link above.

Once your file is saved you will need to upload it to your hosting provider.

You will then need to edit your pages as follows:

  • Open each page
  • Within the HEAD (<head>TEXT</head>) sections of your page add the following text
  • <link rel=”shortcut icon” href=”favicon.ico” >

Obviously you will need to change the name of the file if you call it anything other than favicon.

Then just test it :) If you have any questions or you get stuck at all then please post a comment or drop me an email.

Our bitmap: Our favicon bitmap file

Our favicon: ico file

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • bodytext
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Technorati
  • BlinkList
  • Live
  • Reddit
  • Slashdot
  • StumbleUpon

Technorati Tags: , , , , , , , , , , , , , , , , , , ,

3 Responses to “How to display your web site logo on the browser address bar and in the favorites”

  1. arathi INDIA Windows XP Internet Explorer 6.0 Says:

    I want to display my website logo in the address bar when I open my website.How?

  2. arathi INDIA Windows XP Internet Explorer 6.0 Says:

    I want to display my website logo in the address bar when I open my website in IE.In mozilla and opera it is possible.What to do with IE?

  3. admin0 UNITED KINGDOM Windows Vista Mozilla Firefox 2.0.0.14 Says:

    Hi Arathi. The logo will display regardless of the browser version (so long as the browser supports the functionality. Simply follow the steps above and you will be fine.

Leave a Reply