This document was originally for on the FreeBSD Diary, but it didn't come through. Therefor I'll post it here.

How to create favicon-icons on Unix machines

As described in http://www.freebsddiary.org/favicon.php, sometimes you see these entries in the logfile of your webserver:

"GET /favicon.ico HTTP/1.1" 404 3711

They're from people who bookmark your website (if they're using Internet Explorer) or if you have the following HTML code in your HTML pages (if they have Mozilla or Konquerer).

<LINK REL="SHORTCUT ICON" HREF="http://www.mydomain.com/favicon.ico">

Making such an icon is easy if you're using Microsoft Windows (just use PaintBrush and save it as a ICO file) and relative easy if you're using a Unix-like operating system.

Creating an image

This part is easy, or not, depending on your graphical skills. There are several tools available for this task. I used GIMP, it's available from the FreeBSD ports-collection or from http://www.gimp.org.

The picture should be 16x16 pixels. Editing something that small can be tricky, but if you zoom in up to 1600% it will be easy to make a nice drawing.

If you save it, choose PNM format. It can be anything, but PNM will have the least problems for the next step.

Netpbm - package of graphics manipulation programs and library

After you've made the image, it has to be transformed into the Windows Icon format. The easiest way is to use Netpbm (available as a port in graphics/netpbm or from http://netpbm.sourceforge.net). If it was saved as an PNM file, the way to convert it into the Windows Icon format is with:

ppmtowinicon -output favicon.ico <inputfile.pnm>

If you had saved it as a different format, you should convert it from that specific format into PPM format first. For example, if it was in the PNG or GIF format:

giftopnm <inputfile.gif> | ppmtowinicon -output favicon.ico
pngtopnm <inputfile.png> | ppmtowinicon -output favicon.ico

There are more options available in Netpbm, like rescaling (pnmscale), cropping (pnmcrop) and rotating (pnmrotate). Very handy if you want to run batch jobs on your pictures, like making thumnails from your digital photos.

Adding it to your website

Now the easiest part and the one which shows of all the hard work. Add this line to the HEAD section of your webpage:

<LINK REL="SHORTCUT ICON" HREF="http://www.mydomain.com/favicon.ico">

And reload the page. In Mozilla it shows up in the address-bar. Netscape 4.7 doesn't support it. Konquerer does ask for them, but I don't have it so I couldn't find out where it shows up. Opera 5.0 doesn't support it. Galeon does support them in the bookmarks editor. Internet Explorer 5.0 does support it when you bookmark pages.

With the release of Mozilla 0.9.7, the /favicon.ico was automaticly fetched even if the website didn't have a link to it. With the release of 0.9.8, this was disabled again. But you can get it back by putting this in prefs.js:

user_pref("browser.chrome.favicons",true);

Websites running Netscape Enterprise server will have a /favicon.ico by default, showing the Netscape Logo. So don't be surprised when you see the familair N the address-bar.

Keep in mind that it is a de-facto standard: there is no documentation about it on the W3C pages. If you want check if your browser supports it, have a look at http://www.mavetju.org/, http://slashdot.org/, http://sourceforge.net/ or http://www.theregister.co.uk/.