iOS web app icon sizes
I keep looking up the resources sizes for iOS web apps (for when users save to their home screen). This is complicated by the sizes changing from time to time, so there is a lot of misinformation. Here is what’s current and what works:
| Home screen icon | Startup image | |
|---|---|---|
| iPhone 3Gs / iPod Touch | 57 x 57 | 320 x 480 |
| iPhone 4/4s / iPod Touch | 114 x 114 | 640 x 960 |
| iPad / iPad 2 | 72 x 72 | 768 x 1004 (portrait) 1024 x 748 (landscape) |
| New iPad | 144 x 144 | 1536 x 2008 (portrait) 2048 x 1496 (landscape) |
Startup images are interesting as the landscape image still needs to be delivered in portrait form, design it in landscape and then rotate everything 90ยบ clockwise. The dimisions need to be exact.
I follow Apple’s conventions and name my Retina-ized resources the same as their counterparts but with a @2x at the end. In order to serve the right stuff to the right devices, you need a mess of meta tags. There should be a better way to do this, but here’s what works (this is for the iPad, rinse and repeat for the iPhone and/or iPod Touch):
<!– iPad and iPad 2 –>
<link rel=”apple-touch-icon” sizes=”72×72″ href=”path/to/apple-touch-icon.png” />
<link rel=”apple-touch-startup-image” href=”path/to/ipad-bg-portrait.png” media=”(device-width: 768px) and (orientation:portrait)” />
<link rel=”apple-touch-startup-image” href=”path/to/ipad-bg-landscape.png” media=”(device-width: 768px) and (orientation:landscape)” />
<!– Retina iPad –>
<link rel=”apple-touch-icon” sizes=”144×144″ href=”path/to/a/apple-touch-icon@2x.png” />
<link rel=”apple-touch-startup-image” href=”path/to/a/ipad-bg-portrait@2x.png” media=”(device-width: 768px) and (orientation:portrait) and (-webkit-device-pixel-ratio: 2)” />
<link rel=”apple-touch-startup-image” href=”path/to/ipad-bg-landscape@2x.png” media=”(device-width: 768px) and (orientation:landscape) and (-webkit-device-pixel-ratio: 2)” />