by dan 10/05/06 12:00:00 Article web design.

Favicon (favorite icon) is a 16x16 icon that appears on tabs on Firefox and Opera and should be available in the upcoming IE 7. While redoing my website, I decided to create a favicon (favorite icon) after hearing from some readers that not having favicon was extremely irritating when using tab-capable browser. To ease their pain and suffering, I obliged and created my own.

Step 1: Draw an icon using Photoshop or other paint software in 16x16 pixels.

I thought of using larger canvas and resizing it later but it wouldn't work because 16x16 is awfully small and any detail will be lost. This is what happened when I tried to scale my old logo. Letters became completely illegible.
Instead, start with a clean canvas and draw everything pixel by pixel. Magnify the canvas so you can see each pixel nice and big. And draw like it's 1988.

Step2: Save as PNG file.

Don't save it in jpeg format because it is lossy. This is what it looked like after a couple of minutes of pixel pushing.

Step 3: Convert the PNG file into ICO.

Windows, Linux: png2ico
Web:
www.favicongenerator.com
www.converticon.com
favicon from pics. This is what I used.

Step 4: Add the following line to your HTML header.

< link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

Since Firefox does support PNG as well as ICO, we can use PNG for firefox. Mozilla recognizes both "shortcut icon" as well as "icon" but IE only uses "shortcut icon".

< link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
< link rel="icon" type="image/png" href="favicon.png" />