iOS web app icon sizes

Filed under: Apple | No Comments »

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)” />

Read the latest posts

Leave a Reply