Does a favicon have to be 32x32 or 16x16?

Question

Hello all,

I'd like to use a single image as both a regular favicon and iPhone/iPad friendly favicon.

Is this possible? Would an iPad-friendly 72x72 PNG scale if linked to as a regular browser favicon? Or do I have to use a separate 16x16 or 32x32 image?

Much obliged for any help.

Answer 1

According to the Wikipedia Article on Favicon, Internet Explorer supports only the ICO format for favicons.

I would stick with two different icons.

Answer 2

You will need separate files for each resolution I am afraid. There is a really good article on campaign monitor describing how they created and implemented their icons for each iOS device too:

http://www.campaignmonitor.com/blog/post/3234/designing-campaign-monitor-ios-icons/

Answer 3

Favicons must be 32x32 or 16x16. In addition, Internet Explorer only supports ico files as favorites icons (no PNG, no SVG, no nothing). You'd better create another image.

Answer 4

I am not sure if/how browsers scale large icons, but The W3C suggests the following¹:

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.

---

¹ w3c.org: How to Add a Favicon to your Site (Draft in development).

Answer 5

You can have multiple sizes of icons in the same file. I routinely create favicons (.ico file) that are 48, 32, and 16 pixels. You can add in any size image you want. The question is, will the iPhone use an ico file?

ico also supports transparency, but I'm not sure if it's an alpha channel like PNG; probably more like GIF where it's on or it's off.

http://icofx.ro/

Answer 6

I have recently read a good tutorial about this, you can find it here:

http://www.onextrapixel.com/2010/10/06/pixel-art-create-a-better-favicon-for-your-website/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed:+onextrapixel+(Onextrapixel)

they also show a way to create a multi-resolution favicon which whould do your case.