updated 08/12/05
Favicons are the little icons that appear in your favourites menu and in the address bar of the browser. Techniques here can also be used to make larger desktop icons too.
The file format generally used is ico. Firefox also supports gifs and pngs but since Internet Explorer doesn’t you really need the ico format. The problem is that Photoshop doesn’t save in that format. Fortunately there is a very simple free/donate plugin you can get from Telegraphics which rectifies the problem. Download the file and copy the plugin into the File Formats folder inside your Photoshop Plugins folder. Restart photoshop and you can now both open and save in the .ico format.
The icons used in browsers are 16px x 16px. For simple images just zoom in and use the pencil tool to fill in the 256 squares. A good way to do this is to have two views of the file: a zoomed in one and an actual size one. Go to Window>Arrange>New Window to open a second view of the file your working on.
If you want anything more complicated start bigger but with a multiple of 16 eg. 64px x 64px or 128px x 128px. This will help when resizing back down to 16 x 16.
When done simply save in the usual way choosing the ICO format to save with. The name of the new image file should be favicon.ico and it should be saved in the root (top) folder of your website.
With Firefox that’s all you have to do. However for other browsers, notably IE, things aren't as straightforward. First you should put the following code in the <head> section of your document:
<link rel="shortcut icon" href="http://www.website.org/favicon.ico" type="image/x-icon" />
Apparently using an absolute url rather than a relative one is important for some browsers.
It’s also good to put this code on each page if you want a different icon for different section of your web sites. For example see the antichristmas section of this site which is really a sub site of the main one. Upload and away you go.
Internet Explorer is not very good at showing these icons. Try saving the page as a favourite. Also try dragging the existing icon into the page so it reloads a couple of times. IE is a pain. More about this at Real World Graphics.
Now that Firefox accepts gifs you can also make animated icons using animated gifs. However so that IE users can still see an icon create two icons, gif and an ico and put in the <link /> code above twice. The first line should go to the gif the second to the ico.