This is how I made the favicon for this website

Surely you know what favicons are. No? They're the little images that web browsers load and display next to your bookmarks, web page tab and so on. This page describes how you can make such an icon using Linux/UNIX tools. The favicon's file format is "Windows Icon Format".
In Opera 7, my favicon looks like this: . Notice the "M" to the left.

Including the favicon

Basically, a favicon is file stored on your web server that is referenced from some header line in your html pages. It gets included through a special HTML header which references the file, like this:

There's more to it, but this works for most modern browsers.

Making the icon file

I used two GIF files, converted them to PNM using giftopnm and assembled the two PNMs to one ICO file with ppmtowinicon. Both these programs are common Linux/UNIX programs and should be available in everey recent distribution. If you haven't got them installed, it is only a matter of loading the right pkg, rpm, or deb file usually.

While first GIF defines the look, the second GIF defines the alpha channel (i.e. transparency). The first GIF file (let's name it favicon.gif: ) is made on a 16x16 pixel grid at 4 bpp (16 colors). The second GIF file (let's name it favicon-m.gif: ) is made on a 16x16 pixel grid at 1 bpp (2 colors, black and white). The black pixels define which pixels from favicon.gif are used, while all white pixels indicate transparency where the background "shines through".

Now, they are converted and combined. With the -andppms switch, ppmtowinicon uses the second file to define the transparent areas in the first image.

giftopnm favicon.gif > favicon.pnm
giftopnm favicon-m.gif > favicon-m.pnm
ppmtowinicon -andppms -output favicon.ico favicon.pnm favicon-m.pnm

This yields favicon.ico, which you'll put into your web server's root directory.

Back to main page. Back to software page.

This page was last changed on April 8th, 2003. © Matthias Gärtner 2003