If ever there was a pet peeve of mine, missing or crappy favicons probably ranks pretty high (undoubtedly, higher than it should).
"A favicon (short for "favorites icon"), also known as a page icon, is an icon associated with a particular website or webpage. " ~ Wikipedia
Tied into my usual rants about personal branding, having a favicon is yet another way to establish your brand. The icons are used for bookmarks, appear in tabs making it easier to pick a site out in a sea of tabs, appear in the address bar, and are often snatched for use on other sites in blogrolls. Creating a favicon, even a basic one, is easy.
A little history of the ICO format
A common misconception is that an ICO is simply a bitmap image (BMP) with an ICO extension. Although, the ICO format stores the icons in a bitmap form, the format can actually store multiple bitmaps within it. Each bitmap can be a different size and of a different bit depth including support for alpha transparencies. Download my favicon and you'll notice that it looks really good as a desktop icon! (I have 16x16, 32x32 and 64x64 pixel versions in there.)
Making a favicon
Browsers these days support pretty much any image format such as GIF and PNG. I've even seen some sites use animated GIFs for favicons! So, you could easily export a file from your favourite design app and be done with it.
If you want to take your icons to the next level, I highly recommend you get your hands on a decent icon tool. There's a plugin for Photoshop that I have not personally used but that would probably do the trick.
I actually use Icon Craft. The interface isn't spectacular (it's downright awful!) but it works really well at setting up each of the formats that I want to embed in the file. The software itself is jam packed with features designed to make it easier to create favicons within the editor. I find the editor just too confusing to make heads or tails of it, though.
Instead, I use Fireworks to create a PNG of the appropriate size. I make sure everything looks pixel perfect, including any alpha transparency I might want to include. Then I import the PNG into Icon Craft which retains all the transparency information. I can resize down right from within Icon Craft but if the effect doesn't look good, I'll create the the smaller versions in Fireworks as well and then re-import it into Icon Craft.
Keep in mind that your icon should ideally be under 20k which isn't a problem if you only plan to store the 16x16 and maybe a 32x32 version in there. Some sites apparently have size restrictions on the size of favicons that they accept.
Adding favicon to a site
Adding a favicon to a site is really easy. Easiest of all is just to drop the favicon.ico file into the root of your site. You may have to clear your cache or restart your browser before you see an update. Alternatively, you can add the following HTML to the head of your page:
<link rel="shortcut icon" xhref="http://example.com/favicon.ico" type="image/x-icon">That's it!
