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:
buzilla.mozilla.org
Here’s one that isn’t transparent:
wordpress.com
Here’s a URL bar over http:
yahoo.com
Here’s a URL bar over https:
safepasswd.com
Here’s a URL bar over https with an EV SSL cert:
ebay.com
Here’s a URL bar over https that doesn’t have a transparent favicon:
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.
Tags: favicon, firefox, gimp, ico, Mozilla, photoshop, png
March 22nd, 2008 at 6:15 pm
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.
March 22nd, 2008 at 6:35 pm
@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.
March 22nd, 2008 at 6:39 pm
Bloggers: make your screenshots PNGs, not JPGs
March 22nd, 2008 at 7:14 pm
Is it me or are favicons in the URL bar higher than they should be?
March 23rd, 2008 at 12:26 am
No, it’s not you, somebody has screwed this upward of 1-2 pixels.
March 23rd, 2008 at 5:29 am
See also Bug 366324 – SVG favicons (shortcut icons) support
March 23rd, 2008 at 8:52 am
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.
March 23rd, 2008 at 8:54 am
@Aleksej: Last I checked IE didn’t support SVG, so you’ll run into a problem there.
March 23rd, 2008 at 12:53 pm
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….
March 23rd, 2008 at 2:17 pm
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.
March 23rd, 2008 at 2:54 pm
@Robert: you know, there is no point in discarding feature requests just because IE doesn’t support the feature yet.
March 23rd, 2008 at 3:20 pm
I’ve always used a transparent favicon.
In fact, it’s completely transparent!
March 23rd, 2008 at 7:06 pm
@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).
April 25th, 2008 at 6:56 pm
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.