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?
For IE, Microsoft recommends 16x16, 32x32 and 48x48 packed in the favicon.ico file.
For iOS, Apple recommends specific file names and resolutions, at most 180x180 for latest devices running iOS 8.
Android Chrome primarily uses a manifest and also relies on the Apple touch icon.
IE 10 on Windows 8.0 requires PNG pictures and a background color and IE 11 on Windows 8.1 and 10 accepts several PNG pictures declared in a dedicated XML file called browserconfig.xml.
Safari for Mac OS X El Capitan introduces an SVG icon for pinned tabs.
Some other platforms look for PNG files with various resolutions, like the 96x96 picture for Google TV or the 228x228 picture for Opera Coast.
Look at this favicon pictures list for a complete reference.
TLDR: This favicon generator can generate all these files at once. The generator can also be implemented as a WordPress plugin. Full disclosure: I am the author of this site.
I don't see any up to date info listed here, so here goes:
To answer this question now, 2 favicons will not do it if you want your icon to look great everywhere. See the sizes below:
16 x 16 – Standard size for browsers
24 x 24 – IE9 pinned site size for user interface
32 x 32 – IE new page tab, Windows 7+ taskbar button, Safari Reading List sidebar
48 x 48 – Windows site
57 x 57 – iPod touch, iPhone up to 3G
60 x 60 – iPhone touch up to iOS7
64 x 64 – Windows site, Safari Reader List sidebar in HiDPI/Retina
70 x 70 – Win 8.1 Metro tile
72 x 72 – iPad touch up to iOS6
76 x 76 – iOS7
96 x 96 – GoogleTV
114 x 114 – iPhone retina touch up to iOS6
120 x 120 – iPhone retina touch iOS7
128 x 128 – Chrome Web Store app, Android
144 x 144 – IE10 Metro tile for pinned site, iPad retina up to iOS6
150 x 150 – Win 8.1 Metro tile
152 x 152 – iPad retina touch iOS7
196 x 196 – Android Chrome
310 x 150 – Win 8.1 wide Metro tile
310 x 310 – Win 8.1 Metro tile
I am not sure if/how browsers scale large icons, but The W3C suggests the following1:
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.
1w3c.org: How to Add a Favicon to your Site (Draft in development).
Actually, to make your favicon work in all browsers properly, you will have to add more than 10 files in the correct sizes and formats.
My friend and I have created an App just for this! you can find it in faviconit.com
We did this, so people don´t have to create all these images and the correct tags by hand, create all of them used to annoy me a lot!
Hope it helps you!
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.
According to the Wikipedia Article on Favicon, Internet Explorer supports only the ICO format for favicons.
I would stick with two different icons.
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/
The favicon doesn't have to be 16x16 or 32x32. You can create a favicon that is 80x80 or 100x100, just make sure that both values are the same size, and obviously don't make it too large or too small, choose a reasonable size.
来源：https://stackoverflow.com/questions/4014823/does-a-favicon-have-to-be-32x32-or-16x16