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.
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.
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.
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.
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.
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 replaced (and turned Community Wiki) due to numerous updates and notes from various others in this thread:
Feel free to consult the other answers here for more details.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With