Adding a favicon to your website
Introduction
Firstly, what exactly is a favion? Well it's short of favourites icon and is a small image, most often 16x16 pixels, displayed in the address bar amoungst other places in the browser window.
An example of a favicon is shown to the left on the Firefox 3 browser. Older browsers, namely Internet Explorer 6.0, only show a websites favicon if the website has been bookmarked by the user. All new browsers (Firefox, IE7.0+, etc) will always attempt to display a websites favicon. Favicons also may show in the tab, bookmark and history menus depending on the browser.
Creating the favicon
Your favicon image needs to be 16 x 16 pixels. Clearly this doesn't leave much room so many favicons are very simple - maybe just a colour or a few letters. However there is room for creativity. Here are some examples from popular and well known websites to give you a few ideas:
Now the image needs to be .ico format. Your graphics package may be able to create your favicon in this format however if not you can simply save it as a more common image file (.jpg, .png and such) and convert it using one of many online applications. Personally I use ConvertIcon which will allows you to convert PNG files to ICO files. Favicon.co.uk allows you to convert a wider range of image files to ICO files. Name the file favicon.ico
Adding the favicon to your site
You should upload your favicon.ico file to the root of your website - that is you can access it directly at yourdomain.com/favicon.ico (example). Many browsers will look for a favicon at this location automatically however to make sure every browser knows about your brand new favicon you'll need to add a line of HTML in any pages you want the favicon to show on. Inbetween the <head></head> tags add the following line of HTML:
<link rel="icon" href="/favicon.ico" type="image/x-icon">
If you are using a XHTML doctype you'll need to use this code instead:
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
And it's all done! You may have to restart your browser and/or clear your cache for the favicon to first show.