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.
15 replies on “Webmasters: Make Your Favicon Transparent”
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.
@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.
Bloggers: make your screenshots PNGs, not JPGs
Is it me or are favicons in the URL bar higher than they should be?
No, it’s not you, somebody has screwed this upward of 1-2 pixels.
See also Bug 366324 – SVG favicons (shortcut icons) support
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.
@Aleksej: Last I checked IE didn’t support SVG, so you’ll run into a problem there.
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….
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.
@Robert: you know, there is no point in discarding feature requests just because IE doesn’t support the feature yet.
I’ve always used a transparent favicon.
In fact, it’s completely transparent!
@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).
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.
Opera is ahead of the curve in supporting SVG in <img> and CSS, but still doesn’t support SVG favicon. And HTML5 defines a fallback mechanism for multiple favicons.