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.

Tags: , , , , , ,

Related Posts

Related Posts

15 Responses to “Webmasters: Make Your Favicon Transparent”

  1. Zsinor says:

    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. Robert says:

    @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. anon says:

    Bloggers: make your screenshots PNGs, not JPGs

  4. Is it me or are favicons in the URL bar higher than they should be?

  5. Kula bácsi says:

    No, it’s not you, somebody has screwed this upward of 1-2 pixels.

  6. Bill Gianopoulos says:

    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.

  7. Robert says:

    @Aleksej: Last I checked IE didn’t support SVG, so you’ll run into a problem there.

  8. 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….

  9. Aaron Strontsman says:

    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.

  10. Aleksej says:

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

  11. Neil says:

    I’ve always used a transparent favicon.

    In fact, it’s completely transparent!

  12. Robert says:

    @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).

  13. Bill Gianopoulos says:

    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.

  14. hdh says:

    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.

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

By submitting a comment here you grant this site a perpetual license to reproduce your words and name/web site in attribution.