Create Transparent Favicon using GIMP

August 25, 2011 Internet Stuff

A favicon, also known as a website icon or URL icon, is a little file commonly in the size of 16×16 pixels. Usually it appears right next to the URL on your browser’s address bar, and next to the webpage’s name in your list of bookmarks. To create a transparent favicon, you can either use an online favicon creator, or you can use GIMP to get it done easily. GIMP is one of my favourite free software. It is the most popular GNU image manipulation software.

First of all, open your image, erase any areas of the image that you would like to be transparent. Or if you have a white background, select the white background, select invert, copy visible, open a new file, paste the content. Resize the image to 16×16, save the file as a GIF file.

A dialog will pop up saying:

“Your image should be exported before it can be saved as GIF for the following reasons:

GIF plug-in can only handle layers as animation frames
X Flatten Image

GIF plug-in can only handle grayscale or indexed images
X Convert to Indexed using default settings”

The default setting is fine, just click Export.

Re-open your GIF file, save a copy as Microsoft Windows icon (*.ico)

You will be given a number of options:

“1 bpp, 1-bit alpha, 2-slot palette
4 bpp, 1-bit alpha, 16-slot palette
8 bpp, 1-bit alpha, 256-slot palette
24 bpp, 1-bit alpha, no palette
32 bpp, 8-bit alpha, no palette”

For better quality, select a higher value of bpp. Name your file as favicon.ico.¬†Upload your ico file to your website root directory. You might want to open your header file and add “<link href=”favicon.ico” rel=”shortcut icon”></link>” right before the </header> tag. If your favicon doesn’t show up, try to clean up your cache files, and reload.