By Jeremy Lindblom on June 18th, 2008
Favicons started as a helpful icon identifier for websites back when you’d peruse your bookmarks and track down your favorites. Nowadays, they serve a much more useful purpose: they help brand your site both in browser tabs and in the address bar. Further, if you make use of Firefox’s Bookmarks Toolbar folder like I do, (called the “Links” folder on IE; it usually appears beneath the address bar) you can reduce each of the bookmarks to display just the favicon, allowing you to cram a bunch up there.
Favicon is short for “favorites icon”. A favicon is essentially a resource file in the Windows icon (.ico) format that is associated with a website. Even though the ICO filetype is Windows-based, Linux and Mac systems can still edit and serve them. Favicons are displayed by your browser as a 16×16 pixel image, but should be rendered as a 32×32 image that is then scaled down, as ICOs are scalable to 32×32 in some cases.
[It should be noted that 16x16 is an incredibly small canvas to work with. Chances are, you're going to need to abandon whatever supercool idea you have for a favicon—you're not going to be able to have a mythical dragon slaying a knight guided by a fairie. You might be able to get the dragon's eye. I'm just sayin'.—Ed]
The Windows icon format allows you to embed multiple files into one, so your favicon file should contain both sizes. Fortunately, there are great tools available to create these favicons, and they don’t cost a thing. Take a look at exactly how to make your favicon and links to the necessary tools after the jump.