Why is .ico preferred over .png for favicons?

Question

I just noticed that I inadvertently saved my favicon as a png. and nothing bad happened.

What is gained by saving as .ico. This is obviously the way it is done ( as I've looked at many favicon links in other web-apps ), but I'm trying to understand this at a deeper level.

I'm saving at 32px by 32px. Here is the boiler plate.

<link id='file_icon' rel='icon' href = 'foo/foo.png'>

compared to:

<link id='file_icon' rel='icon' href = 'foo/foo.ico'>

Answer 1

Mainly because .GIF and .PNG files don't work as favicons in Internet Explorer.

Also, the .ICO format allows you to store customized versions at different resolutions, i.e. 16x16, 32x32, 64x64 pixels, and various color depths (16, 24 or 32 bits), insuring that the best possible look is available for the icon, regardless of the size or color depth available in the browser.

http://www.photoshopsupport.com/tutorials/jennifer/favicon.html