.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.
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.
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.
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)".
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.
Avoid PNG in any case if you want reliable IE6 compatibility.
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.
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.
Source: Stackoverflow.com