Mozilla Web Development

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

Here’s one that isn’t transparent:
WordPress Tab

Here’s a URL bar over http:
Yahoo HTTP URL Bar

Here’s a URL bar over https:
SafePasswd HTTPS URL Bar

Here’s a URL bar over https with an EV SSL cert:

Here’s a URL bar over https that doesn’t have a transparent favicon:

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.