Favicon.ico generation
by BenV on Dec.30, 2009, under Boring
Since I keep forgetting how the heck I create these favicon.ico files, 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.
$ 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$ 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
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.
