Web: Favicon dimensions?

Question

I have a favicon with the dimensions of height=26px / width=20px named favicon.png

<link href=http://www.example.com/images/favicon.png rel="shortcut icon" />

However, in my browser, my favicon.png is all distorted.

Question: Is my favicon.png suppose to be a particular size/dimension? Also, can I use a none standard size/dimension and if so, how?

Answer 1

16x16 pixels, *.ico format.

Answer 2

Seems like your file should be .ico type.

Check this post about favicons:

http://www.html-kit.com/support/favicon/image-size/

Answer 3

No, you can't use a non-standard size or dimension, as it'd wreak havoc on peoples' browsers wherever the icons are displayed. You could make it 12x16 (with four pixels of white/transparent padding on the 12 pixel side) to preserve your aspect ratio, but you can't go bigger (well, you can, but the browser'll shrink it).

Answer 4

Wikipedia has this to say:

Additionally, such icon files can be either 16×16 or 32×32 pixels in size, and either 8-bit or 24-bit in color depth (note that GIF files have a limited, 256 color palette entries).

I think the best way is to use a 32x32 gif and test it with different browsers.

Answer 5

All you need: http://www.favicon.cc/

Answer 6

If you have access to Photoshop, check this out:

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

This tutorial links to a plugin that allows Photoshop to save ico files natively, and then provides info on favicon standards.

When I first started doing favicons, the rule was a 16x16 8-bit ico file. If you want to make sure the favicon works in the most browsers, I'd stick with that.