I’ve finally gotten around to creating a favicon for my site. I’ve always found this to be a finicky process, mostly because I’m the farthest thing from a graphic artist around. Since this is something I have tried to do a few times, never quite getting it right till now, and I’ll likely not try to do this again for years, I figured recording the process here would be good for future reference.
First, create the base image to be used for the icon. I found that doing this in a vector graphics program like the freely available Inkscape made life quite a bit easier. The trick is to create a square page and build your image filling that square. It does not matter how big the page is while you build it because you can specify the image size at export time, and Inkscape will take care of clean aliasing of lines at that time. Just don’t get too detailed because the smallest icon size is only 16px by 16px, which doesn’t give a lot of resolution to work with.
I created this SVG image as the base for all subsequent files: 
Yes it is small, but this is only because I sized the page to be 16x16 px, forgetting that the size doesn’t really matter when used as just a base image.
After creating this base image, I then used it to export PNG files of various
sizes: 16x16, 24x24, 32x32, 64x64, 110x110 and 114x114. The 16, 24, 32 and 64
are only used for the favicon.ico, but the other two larger formats are used to
create facebook.png and apple-touch-icon-precomposed.png respectively.
Exporting these files using Inkscape involves choosing Export Bitmap... and
filling out the appropriate fields in this dialog:
And the resulting images:
favicon - 16x16 px:
favicon - 24x24 px:
favicon - 32x32 px:
favicon - 64x64 px:
facebook.png - 110x110 px:
apple-touch-icon-precomposed.png - 114x114px:
The facebook and apple icons can be used as-is, but an additional step is
needed to turn the separate favicon images into a single *.ico image. This
is where Gimp comes into play. With Gimp, open the largest 64x64px image.
Then choose the menu option to Open As Layers... to open the other three
images of different resolutions. This will pull all of your favicon images
into the same Gimp layered image.
Finally, you can export the layers to a single Icon file containing all
resolutions. Choose the Export As... menu option and in the resulting dialog,
enter the file name favicon.ico and choose Microsoft Windows icon (*.ico)
On clicking the Export button, you are presented with a dialog for setting
options on all available formats.
I did try using a smaller palette size to reduce the resulting file size, but I needed to keep the 8-bit alpha channel. Otherwise, the circle is rendered with a jagged boarder. If it weren’t for that, I could drastically reduce the palette size, making the icon 1⁄4 of its current size.
Some reference I used while working on this: