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.

15 thoughts on “Webmasters: Make Your Favicon Transparent

  1. It is not always practical/possible to make the favicon transparent because it must be “readable” on any background. The wordpress.com icon would work well even on a black background because of the white circle, so that one can be made transparent. But e.g. the rememberthemilk.com cannot be made transparent. Your site’s icon would not work well on a black background either. If chase.com removed that whitespace, than the icon would be much less visible on the blue background that is shown in the example. About the safepasswd.com icon: it looks so bad on any background it’s almost like an UI corruption, so nothing could help that.

  2. @Zsinor: That can be worked around by using a border color that’s in contrast. For example a white border around black text.

    That said, there’s really no common place where the favicon is against a black background. It’s 99% of the time against white or gray.

  3. The common place where the favicon displays against a black background is on the bookmarks toolbar if you are using a dark theme such as NASA Night Launch. I was actually considering changing my sites favicon to not use a transparent background because of this issue.

  4. Pingback: foxiewire.com

  5. To add to Bill Gianapoulos’s comment: another common place where favicons are on a dark Grey background is in Songbird’s standard skin. A light border can work, but I guess that sometimes it looks cheaper than a white background.

    PS: In Gimp, you can use Layer > Transparency > Color to Transpancy (sry, if that is not the exact naming of the menu items, I’m using a localized version of Gimp), you can then save the icon as .ico file, since this is a natively supported image format. For multiple sizes and color depths, just use multiple layers.

  6. @Robert: you know, there is no point in discarding feature requests just because IE doesn’t support the feature yet.

  7. @Aleksej: I’ve got to disagree in a sense. Most websites want their websites to look good in all browsers. Adding the feature is great. Using it, is another story. Hopefully IE will eventually cave and add SVG support (then Firefox will just be ahead of the curve).

  8. Well, Firefox has just made it almost impossible to use a transparent background icon for you website because it can display against either a white blue grey tan green or blue background depending on which browser or level of security your ssl certificate conveys. I have just reverted from using a transparent background to using a white background for my favicon because of his issue. I sure hope they see the light hope they fix this before the actual release.

Leave a Reply

Your email address will not be published. Required fields are marked *