What size should apple-touch-icon.png be for iPad and iPhone?

Question

Are Apple touch icons bigger than 60x60 supported, and if so, what dimensions should I use for the iPad and iPhone?

Answer 1

With the iPad (3rd generation) there are now four icon sizes 57x57, 72x72, 114x114, 144x144.

Because retina icons are exactly double the size of the standard icons we really only need to make 2 icons: 114 x 114 and 144 x 144. By setting the retina sized icon to the corresponding standard icon iOS will scale them accordingly.

<!-- Standard iPhone --> 
<link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone-114.png" />
<!-- Retina iPhone --> 
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-114.png" />
<!-- Standard iPad --> 
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad-144.png" />
<!-- Retina iPad --> 
<link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-144.png" />

Answer 2

The icon on Apple's site is 152x152 pixels.
http://www.apple.com/apple-touch-icon.png

Hope that answers your question.

Answer 3

Yes. If the size does not match, the system will rescale it. But it's better to make 2 versions of the icons.

• iPad — 72x72.
• iPhone (≥4) — 114x114.
• iPhone ≤3GS — 57x57 — If possible.

You could differentiate iPad and iPhone by the user agent on your server. If you don't want to write script on server, you could also change the icon with Javascript by

<link ref="apple-touch-icon" href="iPhone_version.png" />
...

if (... iPad test ...) {
  $('link[rel="apple-touch-icon"]').href = 'iPad_version.png'; // assuming jQuery
}

This works because the icon is queried only when you add the web clip.

(There's no public way to differentiate iPhone ≥4 from iPhone ≤3GS in Javascript yet.)

Answer 4

TL;DR: use one PNG icon at 180 x 180 px @ 150 ppi and then link to it like this:

<link rel="apple-touch-icon" href="path/to/apple-touch-icon.png">

Details on the Approach

As of 2020-04, the canonical response from Apple is reflected in their documentation on iOS.

Officially, the spec says:

• iPhone 180px × 180px (60pt × 60pt @3x)
• iPhone 120px × 120px (60pt × 60pt @2x)
• iPad Pro 167px × 167px (83.5pt × 83.5pt @2x)
• iPad, iPad mini 152px × 152px (76pt × 76pt @2x)

In reality, these sizing differences are tiny, so the performance savings will really only matter on very high traffic sites.

For lower traffic sites, I typically use one PNG icon at 180 x 180 px @ 150 ppi and get very good results on all devices, even the plus sized ones.

Answer 5

I think this question is about web icons. I've tried giving an icon at 512x512, and on the iPhone 4 simulator it looks great (in the preview) however, when added to the home-screen it's badly pixelated.

On the good side, if you use a larger icon on the iPad (still with my 512x512 test) it does seem to come out in better quality on the iPad. Hopefully the iPhone 4 rendering is a bug.

I've opened a bug about this on radar.

EDIT:

I'm currently using a 114x114 icon in hopes that it'll look good on the iPhone 4 when it is released. If the iPhone 4 still has a bug when it comes out, I'm going to optimize the icon for the iPad (crisp and no resize at 72x72), and then let it scale down for old iPhones.