BenV's notes

Since I keep forgetting how the heck I create these favicon.ico files (or favicon or Favorites Icon), it’s time to put it here.

First of all, the size. Obviously Internet exploder fails in epic ways regarding favicon.ico.
Basically, if it isn’t a microsoft ico format with a 16×16 (or maybe 32×32) icon in it, IE fails.
So what we do is create a nice ico file that contains all relevant sizes (which are 64×64, 48×48, 32×32 and 16×16).
Oh, let’s not forget about the color depth, this should be either 8-bit or 24-bit. (although it wouldn’t surprise me if 24 bits fails on IE).
Note that Firefox and Opera aren’t that picky, they even accept PNG and JPEG files these days. Even better, they claim to support APNG files… could be interesting.

Anyway, the creation. Gimp yourself a nice set of images for the specified format, or if you’re lazy simply create 1 image and convert it with imagemagick.
P.S. Details on convert can be found here, wonderful tool.

$ IMAGE=myimage.png
$ convert -resize 64x64 -gravity center -background transparent -extent 64x64 $IMAGE ico64.png
$ convert -resize 48x48 -gravity center -background transparent -extent 48x48 $IMAGE ico48.png
$ convert -resize 32x32 -gravity center -background transparent -extent 32x32 $IMAGE ico32.png
$ convert -resize 16x16 -gravity center -background transparent -extent 16x16 $IMAGE ico16.png

Now that we’ve got those images fixed, I usually use png2ico to convert the to the final ico file.

Obviously we first need to compile and install that tool. Skip this if you already have it 🙂

benv@janeman:/usr/src$ wget http://www.winterdrache.de/freeware/png2ico/data/png2ico-src-2002-12-08.tar.gz
benv@janeman:/usr/src$ tar zxvf png2ico-src-2002-12-08.tar.gz
benv@janeman:/usr/src$ cd png2ico
benv@janeman:/usr/src/png2ico$ make
benv@janeman:/usr/src/png2ico$ sudo ginstall -m755 -o root -g root png2ico /usr/local/bin
benv@janeman:/usr/src/png2ico$ ginstall -m644 -o root -g root doc/png2ico.1 /usr/local/man/man1


Now for the creation of the favicon.ico

benv@janeman:/tmp$ png2ico favicon.ico ico64.png ico48.png ico32.png ico16.png

Put it in your webroot and you can add a header tag to make it official (although most browsers request favicon.ico whether you specify it or not).

NOTE:
If you add the 16×16 icon, be aware that it might not look as fancy as you’d think. Most browsers will display this size by default though, so if your 16×16 version looks
like crap, simply don’t include it.

Update: since google’s still not as good as I’d like it to be, let’s add it here to be sure. This is about generation of favicon files. Favorites Icons. you know. Learn it google! Next time I search for “benv favicon” I want to find this! 🙂
Update2: guess what. Google cleared up their act and googling for “benv favicon” finally gives this page as the top hit. Yay.