Webmasters: Make Your Favicon Transparent

There are still quite a few websites that use a Favicon on a white background. While this looked OK in older browsers, these day with browsers like Firefox 3.0, they don’t look so great. It’s about time to make them transparent. Here are a few examples:

Here’s a tab with a nice transparency:
Bugzilla Tab
buzilla.mozilla.org

Here’s one that isn’t transparent:
WordPress Tab
wordpress.com

Here’s a url bar over http:
Yahoo HTTP URL Bar
yahoo.com

Here’s a url bar over https:
SafePasswd HTTPS URL Bar
safepasswd.com

Here’s a url bar over https with an EV SSL cert:
PayPal EV SSL URL Bar
ebay.com

Here’s a url bar over https that doesn’t have a transparent favicon:
Chase HTTPS URL Bar
chase.com

If your a photoshop user and use an ICO favicon, you can use this plugin to generate them on Mac/Win with pretty much any remotely modern version. It’s available under GPL. I recall you can easily do so using GIMP as well, though I’m no GIMP pro, so I’ll leave it to someone else to document the best way to do so. PNG also supports transparency through pretty much any program that can save PNG‘s.

So spread the word. Designers, it’s time to start fixing up those few pixels of whitespace. It would make things look so much better.