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.
9 Answers
257
votes
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.
377
votes
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.
56
votes
.png files are nice, but .ico files provide alpha-channel transparency, too, plus they 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">
<link rel="apple-touch-icon" href="http://sstatic.net/so/apple-touch-icon.png">
The apple-itouch thingy is for iphone users that make a shortcut to a website.
28
votes
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 show up when e.g. dragging a link to Windows explorer).
This good idea, however, tends to clash with browser implementations.
16
votes
PNG has 2 advantages: it has smaller size and it's more widely used and supported (except in case favicons). As mentioned before ICO, can have multiple size icons, which is useful for desktop applications, but not too much for websites. I would recommend you to put a favicon.ico in the root of your application. An if you have access to the Head of your website pages use the tag to point to a png file. So older browser will show the favicon.ico and newer ones the png.
To create Png and Icon files I would recommend The Gimp.
12
votes
Some social tools like Google+ use a simple method to get a favicon for external links, fetching http://your.domainname.com/favicon.ico
Since they don't prefetch the HTML content, the <link> tag will not work. In this case, you might want to use a mod_rewrite rule or just place the file in the default location.
8
votes
An ico can be a png.
More precisely, you can store one or more png inside this minimal container format, instead of the usual bitmap+alpha that everyone strongly associates with ico.
Support is old, appearing in Windows Vista (2007) and is well supported by browsers, though not necessarily by icon editing software.
Any valid png (whole including header) can be prepended by a 6 byte ico header and 16 byte image directory.
GIMP has native support. Simply export as ico and tick "Compressed (PNG)".
5
votes
For what it's worth, I do this:
<!-- Favicon - Generic -->
<link rel="icon" href="path/favicon-32_x_32.png" sizes="32x32">
<link rel="icon" href="path/favicon-57_x_57.png" sizes="57x57">
<link rel="icon" href="path/favicon-76_x_76.png" sizes="76x76">
<link rel="icon" href="path/favicon-96_x_96.png" sizes="96x96">
<link rel="icon" href="path/favicon-128_x_128.png" sizes="128x128">
<link rel="icon" href="path/favicon-192_x_192.png" sizes="192x192">
<link rel="icon" href="path/favicon-228_x_228.png" sizes="228x228">
<!-- Favicon - Android -->
<link rel="shortcut icon" href="path/favicon-196_x_196.png" sizes="196x196">
<!-- Favicon - iOS -->
<link rel="apple-touch-icon" href="path/favicon-120_x_120.png" sizes="120x120">
<link rel="apple-touch-icon" href="path/favicon-152_x_152.png" sizes="152x152">
<link rel="apple-touch-icon" href="path/favicon-180_x_180.png" sizes="180x180">
And I still keep the favicon.ico in root.
