Making multi-resolution favicons in GIMP


My favicon

The first time I tried to make a favicon for a university assignment, it seemed that out of all the graphics programs I possessed, the GIMP was the only program that was able to handle and create ICOs without needing me to find a web service or download a program specially for the purpose (and there wouldn't be any for a Mac anyway). All praise the GIMP!

The best tutorial (in my opinion) as to how to create multi-resolution favicons in the GIMP used to be at Egressive, however since they were acquired by Catalyst IT, this page has since disappeared from the web.

Luckily Onextrapixel managed to help in archiving an image from the tutorial, which has been reproduced below. Luckily the essence of making a multi-resolution favicon with GIMP (with transparency) is largely in this image.

Multi-resolution favicon with transparency created in GIMP

If you already have GIMP installed, the process is pretty simple. If you haven't... well, what you doing here? Shoo! Go install it first!

If you have read any other article somewhere on the web like the Onextrapixel one, there are several sizes you can make your icon, but for the sake of following our favourite dearly departed article, we will make square icons of 16px x 16px, 32px x 32px, 48px x 48px, 64px x 64px and 128px x 128px. These should be be individually made in any graphics program, but if you want it to have transparency, make sure it's exported/saved as a PNG in a program that supports transparency.

Open in Layers

Go to GIMP and open the largest image/image with the largest canvas in Photoshop terms, which is the 128px file in this case. Click File → Open as Layers and select all the other versions of the icon. Ensure they are arranged from smallest to largest as per the image from Egressive above.

Finally, export the whole thing by clicking File → Export, Select[ing] the File Type (By Extension) and making sure the extension is ico. Don't forget to name your file appropriately before clicking Export. A second window should come up: Export Image as Windows Icon (the left half of Egressive's original image). Simply click Export again if you don't want to compress the PNG files (true in most cases).

Select the File Type (By Extension)

Ta-dah~ You should have your multi-resolution favicon made without trouble and ready to upload. I haven't had the chance to rest if this ICO file will actually ensure the site's favicon/shortcut icon is actually pristine and sharp when not merely viewed as an icon in my browser, so I'd be interested to know if you came across any issues.