Favicons Basics and How to Get Your Own

A favicon is 16x16 pixel square, customized icon that is used to represent a website in URL address bars, bookmarks, shortcuts and other locations online or in a users browser. These icons are most commonly displayed directly to the left of a website address in the address bar of the web browser, such as the bold AC icon in blue that Associated Content is currently using. Favicons help web designers and marketing professionals maintain visibility of their brand throughout both the web as well as a visitors browser and bookmarks. Thanks to some of the online resources available for developing these icons, both professional and amateur designers can customize their own unique icon from scratch or by simply converting and already existing image.

Design from Scratch

Favicon.cc has a free online tool that allows users to design their own favicon entirely from scratch bit by bit. Icons created with this tool are limited to 256 squares, but the limitless availability of color tones leaves ample room for a decent designer to create something that will look good as a favicon. There are galleries available to get you started if you don't already have an image in mind. In fact, favicon.cc is worth a visit even if you don't need an icon of your own just to see some of the great designs people have come up with in the top rated and latest additions portions of the service.

Create from an Image

An even easier method of obtaining a customized favicon is to simply import a picture of your own to a conversion tool such as this. The favicon tool available via html-kit.com allows users to take a preexitsting avatar and automatically transfer it into a 16x16 bit .ico file. For twitter users, there is even a function that will import your twitter avatar and give you an immediate presentation of how the file would appear as a simplified favicon. Although the website provides a free visual sample of your new favicon, it is necessary to download the developers software to make the actual .ico file from your desktop. This may well be worth the trouble, as the samples available from my personal avatars at this website were many times over better than anything that I could come up with over at favicon.cc.

Sources:

http://www.smashingmagazine.com/2009/05/21/web-design-industry-jargon-glossary-and-resources/
http://en.wikipedia.org/wiki/Favicon
http://www.favicon.cc/
http://www.html-kit.com/favicon/