Step 1: Photoshop does not come with the ability to save Window's icon (.ico) file formats as standard, so you need to download a plug-in before you can proceed. Telegraphics have exactly what you need, so you should fetch the plug-in from them and install it before proceeding any further. It's a free download, capable of supporting ICO files in 1, 4 and 8-bit Indexed and 24-bit RGB modes, and also reads and writes 32-bit "XP" icons (with 8-bit alpha channel). Suffice it to say that I consider this plug-in useful for more than just this tutorial - if you are considering starting a career in icon design, then this is an essential plug-in too!

Step 2: Favicons have a standard size of 16x16 pixels. Many people find it exceptionally difficult to design in such a small canvas area, so this leaves you with a choice - You can either stick to a 16x16px format and carefully design each icon pixel-by-pixel with the Pencil Tool (100% opacity, 1px thickness), or you can design with a canvas of 64x64 pixels and resize it later. If you choose the latter option, remember that you'll need to stick to bold designs - excessive detail will just be lost when you scale the image down.

Step 3: When you have finished designing your icon you need to save it in an appropriate format. Go to File > Save As, select the format as Windows Icon (ICO) (this will only be available once you have installed the plug-in and restarted Photoshop), and save your image as Favicon.ico. Now upload this file into the base HTML directory of your website, together with your index/home page.
 

Step 4: Some browsers automatically look for a file called Favicon.ico or favicon.ico (note the type case) on your website and display your icon. Others, however, prefer a direct link in your HTML in the HEAD section on each page telling the browser where to look for the file. To maintain maximum compatibility, therefore, you should insert this code into all your HTML pages:

If you run a Linux system, you MUST ensure that the casing of your file and the <link> reference are the same. Yes, I know its a pain, but that's Linux.

NB. Please note that not all new browsers have flawless support for the favicon feature! Microsoft IE6 for Windows, for example, does not display the favicon until the URL has been added to favourites. Safari for the MAC caches favicons, so if you change it you'll need to empty your cache before the new one will show.

Footnote: Well... that's it for Favicons! By definition they may be mere fluff, but they do make a site stand out in a browser's URL history, and they add virtually no overhead to your web server, so there is little reason not to use them! If you need some inspiration, try looking at this collection... or just browse around and see what pops up. Who knows... your imagination could be fired up in all sorts of ways...