How to create transparent favicons


Updated: June 19, 2013

If you have a website, then you surely have contemplated using favicons, y'know those little icons displayed on browser tabs next to the site name or page title, which add a unique feel to your content. So how about transparent favicons?

This is a tricky question. First, which programs or services can create .icon files? Will you have to pay? Do you want to use online conversion sites? And is there a way to get your favicons to be transparent, for free, without having to rely on anyone else? The answer is yes, and this tutorial will show you just that.

Teaser

Tools needed

Luckily, you only need GIMP. This awesome, cross-platform image manipulation suite can do all the hard for you, including creating standard, non-transparent and transparent favicons. With transparent ones, the process is a little trickier than just saving the files in the ICO format. Let's see what you need to do.

HIMP, main view

Step 1: Transparency

Yes, do make sure you have an alpha channel in your image.

Transparency

Step 2: Save as GIF

Save the file as non-animated GIF. Then open that file in GIMP.

Save as GIF

Step 3: Save as ICO

Once again, I remind you, open the GIF file and save it as ICO, not the original project file. When prompted, you will need to choose the icon details. ICO files are normally 16x16px or 32x32px in size. 4bpp, 1-bit alpha, 16-slot palette should work in most cases. Some browsers might refuse to cooperate, and you might have to use 8bpp. Maybe.

ICO options

Step 4: Test

In order to test, you will need to upload the file. But you might have to clear the cache first, as the browsers may load the cached favicon for as long as 24 hours after last visit, so if you keep visiting your site frequently for some reason, you may never see the change take effect.

Test works

Conclusion

This is a fairly short, and possibly trivial tutorial. But from what I've seen out there, it's chaos. There are so many guides, most referring people to software that costs money or using a variety of online converters. All those solutions could work, but they are much less elegant than opening GIMP and spending some two minutes tweaking.

Indeed, as often is the case, the free workhorse named GIMP will do what you need, although programs like Paint.NET and IrfanView in Windows can also create ICO files. Not sure about the transparency. Well there you go. Simple, free and you've earned another notch in your image processing belt. See ya around, fellas.

Cheers.

RSS Feed icon

del.icio.us del.icio.us stumbleupon stumble digg digg reddit reddit slashdot slashdot



Advertise!

Would you like to advertise your product/site on Dedoimedo?

Read more

Donate to Dedoimedo!

Do you want to
help me take early retirement? How about donating
some dinero to
Dedoimedo?

Read more

Donate