favicon.png vs favicon.ico - why should I use PNG's instead of ICO's?

Question

Other than the fact that PNG is a more common image format, is there any technical reason to favor favicon.png vs. favicon.ico?

I'm supporting modern browsers which all support PNG favorite icons.

Answer 1

Avoid PNG in any case if you want reliable IE6 compatibility.

Answer 2

png allows you to use alpha-channel transparency, which can look nicer on browsers that display the icon on various backgrounds (such as colored/gray tabs versus a white address bar) - especially if your icon isn't blocky in nature.

Modern browsers all allow specification of a favicon via a <link> tag in the page content, so you can specify a PNG favicon there while keeping a not-so-pretty ico favicon in the directory tree if you desire IE6 compatibility.

Answer 3

All modern browsers (tested with Chrome 4, Firefox 3.5, IE8, Opera 10 and Safari 4) will always request a favicon.ico unless you've specified a shortcut icon via <link>. So if you don't explicitly specify one, it's best to always have a favicon.ico file, to avoid a 404. Yahoo! suggests you make it small and cacheable.

And you don't have to go for a PNG just for the alpha transparency either. ICO files support alpha transparency just fine (i.e. 32-bit color), though hardly any tools allow you to create them. I regularly use Dynamic Drive's FavIcon Generator to create favicon.ico files with alpha transparency. It's the only online tool I know of that can do it.

There's also a free Photoshop plug-in that can create them.

Answer 4

.png files are nice, but .ico files provide alpha-channel transparency, AND give you backwards compatibility.

Have a look at which type StackOverflow uses for example (note that it's transparent):

<link rel="shortcut icon" href="http://sstatic.net/so/favicon.ico"&gt; 
<link rel="apple-itouch-icon" href="http://sstatic.net/so/apple-touch-icon.png"&gt;

The apple-itouch thingy is for iphone users that make a shortcut to a website.

Answer 5

The theoretical advantage of *.ico files is that they are containers than can hold more than one icon. You could for instance store an image with alpha channel and a 16 colour version for legacy systems, or you could add 32x32 and 48x48 icons (which would should up when dragging a link to Windows explorer).

This good idea, however, tends to clash with browser implementations.

Answer 6

Since IE6-support has now been discontinued by MS, the question of compatibility with it is now not an issue ;-)

Answer 7

Furthermore - Google (google.com, google documents, youtube.com among others) and several other big players have dropped the support for IE6. IE6 RIP! =o)

Answer 8

I would say favicon.ico, first because you don't need to add a link tag unless you use a non-default location, but also because you can have several icons depending on the browser support, and Axialis's IconWorkShop is awesome for that: it can create png-like images for the more recent ones yet include automatically paletted 256-colors style icons for older ones, and you can choose which types of icons to include in the .ico file.

Also, its plugin integrates directly in Paint Shop Pro (even the old 7/8 versions [which are often faster than the recent versions]) and Photoshop, so you can just go to plugins > Send to IconWorkShop, and it opens a new project ready with the image you were working on in your favorite image edition tool (IW also has image edition tools but I never used them personally).