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

png favicon ico
Jon Galloway picture Jon Galloway · Aug 28, 2009 · Viewed 311.2k times · Source

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

mercator picture mercator · Aug 28, 2009

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.

Related questions

Favicon: .ico or .png / correct tags?

In a HTML5 document, which favicon format do you recommend and why? I want it to be supported by IE7 and all the modern browsers. Also, when using .png, do I need to specify the type (type="image/png")?

Read More
Favicon Standard - 2020 - svg, ico, png and dimensions?

What favicon dimensions, file formats and meta/link tags should be used as of 2020? This includes apple icon, windows, android and other devices people use today. I use Opera and I can see it supports svg format. Is it the …

Read More
Change color of PNG image via CSS?

Given a transparent PNG displaying a simple shape in white, is it possible to somehow change the color of this through CSS? Some kind of overlay or what not?

Read More