Transparency in favicons

Published on Wednesday, June 18th, 2008 at 7:12 am in Design Usability Web Development.


Favicons are now more important then ever, they help you in branding your website online. While it’s just a tiny icon it’s one the first things people see, appears in many social bookmarking tools and it’s visible in your favorites/bookmarks in browsers.

With the release of Firefox 3 favicons not using transparency look extra ugly next to the address bar and in tabs. A lot of sites use white as their background color not transparent which results in a ugly white background on the new gray background next to the address bar.

While online favicon generators like favikon.com are nice, they don’t offer the full control you should have over your icons. I create all of my favicons in Photoshop and use a nifty little plug-in called Iconbuilder. Iconbuilder by Iconfactory gives you a lot (maybe even a overkill) of export functions. You can create icons in multiple sizes and export directly to the .ico format (including transparency).

3 comments on Transparency in favicons

  • You favicon still works good!

  • Yes, I tested them when I saw this issue occur in the Firefox 3 Beta.

  • Iconbuilder is a very good product. It does what you are suggesting, plus a whole lot more. However, it is $79, which if all you are doing is making a transparent favicon, is a lot of money.

    A good alternative (free - but $5 donation suggested) is ICO FORMAT plugin from Telegraphics (Mac/Win).

    http://www.telegraphics.com.au/sw/#icoformat

Leave a comment

Guidelines
All comments are reviewed for offensive content or outright spam. Some xhtml is allowed.

Damien van Holten
About Damien van Holten

I'm a designer, web developer and SEO with a passion for XHTML, CSS, usability and online marketing. I live and work in and around Rotterdam, the Netherlands. More.

Recently published
Similar posts
Shirts for Coders

ShirtsforCoders.com Show the world your love for
XHTML & CSS!