HTML

apple-touch-startup-image for iPhone 6

I am looking to add the apple-touch-startup-image for the iPhone 6 and 6 Plus to my web app. I am not 100% sure my numbers are accurate. Is this correct?

<!-- iOS 8 iPhone 6 (portrait) -->
<link rel="apple-touch-startup-image" href="/apple-touch-startup-image-750×1294.png" media="(device-width: 375px) and (device-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)">
<!-- iOS 8 iPhone 6 (landscape) -->
<link rel="apple-touch-startup-image" href="/apple-touch-startup-image-710x1334.png" media="(device-width: 375px) and (device-height: 667px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)">
<!-- iOS 8 iPhone 6 Plus (portrait) -->
<link rel="apple-touch-startup-image" href="/apple-touch-startup-image-1242×2148.png" media="(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)">
<!-- iOS 8 iPhone 6 Plus (landscape) -->
<link rel="apple-touch-startup-image" href="/apple-touch-startup-image-1182x2208.png" media="(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)">

3 Answers

Matt West
Matt West
14,545 Points

Hi Ken,

Apple's documentation specifies the following:

For iPhone 6:
750 x 1334 (@2x) for portrait
1334 x 750 (@2x) for landscape

For iPhone 6 Plus:
1242 x 2208 (@3x) for portrait
2208 x 1242 (@3x) for landscape

The linked page refers specifically to iOS apps, but I believe the same applies to web app startup images.

Not sure if true for native apps, but for web apps you have to take 20 (40 for @2x, 60 for @3x) out. I just wanted to know if my math and media quarries were correct ;)

BTW, this is a great guide for all iPhone sizes.

Thanks, I had not seen that page yet.

Matt West
Matt West
14,545 Points

I thought that didn't apply anymore, since iOS7&8 display the startup image underneath the status bar. It's my understanding that removing 20px was to account for the image being pushed under the status bar on older versions of iOS.

Great resource by the way, thanks for sharing :)