A “favicon” is that neat little icon just to left of your address bar or bookmarks and is referred to as a page icon. These favicons are associated with a particular website and can be customized to any desire so long as fits the 16x16-pixel ratio. Most modern browsers like Firefox, Internet Explorer 7 and Opera support favicons and are often used as a logo display on the micro scale.

Originally, when using Firefox the favicons were just for bookmarks, which were generated from a favicon.ico file placed in the root directory of your server. However, as technology advanced and open source browsers became more widespread the use of the favicon was made more flexible using XHTML.

Creating Your Favicon

Step 1: Using your favorite editor (Photoshop, Fireworks) create a new canvas. Because of the small size of the favicon, it’s best to use a larger pixel size like 32x32 or 64x64. Then create your graphic, make sure to keep in mind how small your product is going to be; try to keep it simple and use few colors.

Step 2: Re-size your file image back down to 16x16. In Adobe Photoshop this can done by selecting Image > Image Size then entering 16 in the height and width boxes. In addition, save your image to a convenient place.

Step 3: Convert your file to .ico, this can be achieved a couple of ways. First, if you use Adobe Photoshop download the ICO plug-in from Telegraphics.com. Once installed all you need to do is select Save As > then Format and save it as .ICO. Alternatively, if you do not use Photoshop you can use web based converters like ConvertIcon, IrfanView and IconEdit 32 or you can use a favicon generator. There are also free software downloads for converting a .PNG to .ICO like ICOFix and FAVIcon.

Step 5: The final step is to insert the code into your HTML and you are done. Find the head tags and between them, insert this code. (Make sure your href is modified to wherever your favicon is saved)