Friday, March 16, 2007

creating a transparent favicon.ico with Gimp

I'm always forgetting the steps to do this properly. Here you go:
1) open a favorite image that you'd like to turn into a favicon to appear in your browser's location bar
2) click Image->Mode->RGB
3) using the erase tool, erase any areas of the graphic that you'd like to be transparent
4) using Image->Scale, resize the image to 32x32, the proper size for a favicon
5) first save the file as a GIF
- Gimp will popup a dialog that says "GIF can only handle grayscale or indexed images"
6) select * Convert to Indexed using default settings
7) click Export
8) save a copy as .ico. It will give you a number of choices for bits/pixel:
1 bpp, 1 bit alpha, 2-slot palette
4 bpp, 1 bit alpha, 16-slot palette
8 bpp, 1 bit alpha, 256-slot palette
32 bpp, 8 bit alpha, no palette

Choose 4bpp. However, I have seen with some images that 8bpp needs to be used.
9) upload to your website and enjoy!


Jay Dub said...

Thanks for this tutorial. I just used it successfully.

Cacasodo said...

Right on.

Fine said...

Thanks for the help:) For those who have a single colour background: In stead of using Eraser tool in Gimp, go to Colors->Color to alpha.

Cacasodo said...

Thanks for the tip, Fine.

Oscar said...

Thanks for the waterclear tutorial. Eventhough you wrote it 5 years ago, it's still helpful!!

Cacasodo said...

Glad it still works, given the fluid nature of Linux development!

Feel free to drop me a line or ask me a question.