Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

favicon

png

ico

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.

like image 691
Jon Galloway Avatar asked Aug 27 '09 22:08

Jon Galloway


People also ask

Should I use ICO or PNG for favicon?

A favicon can actually be either a PNG, GIF, or ICO file. However, ICO files are typically used more than others as the file size is smaller and it is supported in all major browsers. PNGs are used more commonly for IOS, Android, and Windows 10 devices.

What is the difference between PNG and ICO?

An ICO is actually a specialized file format that contains a collection of images at potentially many different sizes and color depths. A png is a specific image.

Should favicon be SVG or PNG?

SVG would be nice, but is not supported by all browsers. So the easiest solution is still to just use PNG images. Google explicitly says they don't support 16x16 or 32x32 icons. For Google results, you need to include at least one icon that is a multiple of 48x48.

What file format should a favicon be?

This document does not discuss in detail how to create a favicon image. However, the format for the image you have chosen must be 16x16 pixels or 32x32 pixels, using either 8-bit or 24-bit colors. The format of the image must be one of PNG (a W3C standard), GIF, or ICO.


2 Answers

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.

like image 160
mercator Avatar answered Oct 02 '22 10:10

mercator


Answer replaced (and turned Community Wiki) due to numerous updates and notes from various others in this thread:

  • ICOs and PNGs both allow full alpha channel based transparency
  • ICO allows for backwards compatibility to older browsers (e.g. IE6)
  • PNG probably has broader tooling support for transparency, but you can find tools to create alpha-channel ICOs as well, such as the Dynamic Drive tool and Photoshop plugin mentioned by @mercator.

Feel free to consult the other answers here for more details.

like image 23
3 revs, 2 users 93% Avatar answered Oct 02 '22 08:10

3 revs, 2 users 93%