How to design a Favicon for your website

Somebody asked me ages ago about how to design a favicon for a website, you know those small icons in the address bar which become really useful if you use bookmarks as you can visually spot the bookmark amongst others.

So heres a tutorial on how to do that: How to make a website icon.
Note that the application used in the tutorial is Photoshop on Windows however Photoshop on Mac OSX does not have the .ico format. Instead use IconFactory Pro (the app we used to create CD-ROM icons) to export this format from Photoshops filter menu. It’s installed on all the Macs in ALF19.

Failing this you can always design your image in photoshop, save it as a flatten .gif and us this online tool to generate the favicon.

When you add the code to your html document head make sure you do so in lowercase and not in uppercase as the tutorial suggests (thats not valid xhtml).