Help Stefan Campaign
If you can spare $1 then help support this site and change someone's life forever? Learn how and why on the Help Stefan campaign page. Or donate $10 and get my guide to spices book as a gift for your donation!

Celtnet Information:

How to Display your Site Icon (Favicon) on the Address Bar and in Favourites Lists

I'm sure that you've noted all those websites who have their site icons displayed in your browser's address bar. The same icon that also gets associated with the site's address in your bookmarks/favorites list. All the major and professional websites seem to be using this type of website branding these days. After all, it's a good way of making your site stand own in an over-crowded favourites list. But how would you like to display your own site logo in this way?

Examples of this are shown below:

Branding your Site:

Despite what you might be thinking it's not that difficult to add the brand image for your own website. There's no complex code to write (you might need some basic HTML) and there's not even very complex image manipulation to perform...

In reality the site icon or site logo is a tiny image file (16×16 pixels in fact) which needs to be saved as a Windows icon file (logo.ico, for example). First you will need to create your site image. This can be a simple acronym for your company, a simple image or an abstract design incorporating your site colours. My site logo just happens to be an embossed silver oak tree, as below:

Creating your Icon:

Once you've created the large-scale version of your image you now need to convert this into a Favicon (short for Favorites Icon). To do this the original image needs to be cropped square, shrunk to ×16 pixels and then exported as a Windows Icon file. This can be achieved with a number of image manipulation applications, including Graphic Converter for the Mac or any one of several shareware applications for Windows (these can be found at sites such as ZDNet Downloads. Or you can use a Favicon generation site such as FavIcon from Chami. All of these sites will return you a tiny Favicon

Using your Icon:

Now that you've created your Favicon you'll want to make it available on your site. The methods listed below will work with IE 5.x and better as well as Firefox and Safari.

First Method

This is by far the easiest method, though it does rely on your having access to the root directory of your website (if you don't have access see the Second Method below.

Simply place the icon file (call it favicon.ico) in the root directory of your website (this is usually where your index.html file is located). For me this means that the favicon.ico favicon is available at "www.celtnet.org.uk/favicon.ico". This method has the advantage that the web browser automatically looks for the favicon.ico file in your root directory and as a result the icon will automatically be included when your site is added to someone's favourites list. Using this method your favicon is also available to every page in your website.

Second Method

Use this method if you don't have access to the root directory of your website or if your website is divided into many parts or domains each of which requires its own favicon.

Simply place the icon file in your images folder (this time you can call it whatever you want eg tree.ico). You now need to add some code to each and every one of your web pages (add this code between the <head> and </head> tags [it is usually placed just before the </head> tag]).

<LINK REL="SHORTCUT ICON" HREF=
"http://www.celtnet.org.uk/images/tree.ico" />

If you've followed all the instructions above to the letter then you will now have your own personal favicon which will be associated with your site in your viewers' bookmarks.