Multiple "apple-touch-startup-image" resolutions for iOS web app (esp. for iPad)?

Question

I've written an HTML5-based iOS web application and all seems to be working well, but I'm trying to polish it up with multiple startup screens. The iPhone/iPod touch works well w/a PNG of 320x460, as follows:

<link rel="apple-touch-startup-image" href="img/startup_screen-320x460.png" />

I found plenty of documentation that says the startup images for the iPad should, like the iPhone/iPod touch, have the 20px shaved from the height to accommodate for the status bar giving resolutions of 768x1004 (portrait) or 1024x748 (landscape). However, in my testing (currently w/an iPad running iOS 3.2.2), only the 768x1004 (portrait) resolution works (but is incorrect—20px too narrow—when in landscape mode).

I've tried the following (a wild guess based on the functionality of the apple-touch-icon links), to no avail:

<link rel="apple-touch-startup-image" href="img/startup_screen-320x460.png" />
<link rel="apple-touch-startup-image" sizes="1024x748" href="img/startup_screen-1024x748.png" />
<link rel="apple-touch-startup-image" sizes="768x1004" href="img/startup_screen-768x1004.png" />

Only the 768x1004 resolution image works if it's the last link element listed. If the 1024x748 resolution image is last, a gray background is rendered in its stead (but never the 768x1004). So, obviously the apple-touch-startup-image link doesn't support the sizes attribute.

Is this supported in newer versions of the iOS? Is there any way to support multiple startup images? Should I create a 1024x768 startup image? If so, will is be scaled down for the iPhone/iPod touch? Or, should I just give up and not have a startup image for the iPad?

Answer 1

definitive solution for startup-image and touch-icons for iPad and iPhone (landscape || portrait) and (retina || not):

        <!-- iPhone ICON -->
        <link href="apple-touch-icon-57x57.png" sizes="57x57" rel="apple-touch-icon">
        <!-- iPad ICON-->
        <link href="apple-touch-icon-72x72.png" sizes="72x72" rel="apple-touch-icon">
        <!-- iPhone (Retina) ICON-->
        <link href="apple-touch-icon-114x114.png" sizes="114x114" rel="apple-touch-icon">
        <!-- iPad (Retina) ICON-->
        <link href="apple-touch-icon-144x144.png" sizes="144x144" rel="apple-touch-icon">

        <!-- iPhone SPLASHSCREEN-->
        <link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image">
        <!-- iPhone (Retina) SPLASHSCREEN-->
        <link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
        <!-- iPad (portrait) SPLASHSCREEN-->
        <link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image">
        <!-- iPad (landscape) SPLASHSCREEN-->
        <link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image">
        <!-- iPad (Retina, portrait) SPLASHSCREEN-->
        <link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
        <!-- iPad (Retina, landscape) SPLASHSCREEN-->
        <link href="apple-touch-startup-image-2048x1496.png" media="(device-width: 1536px)  and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
        <!-- iPhone 6/7/8 -->
        <link href="/images/favicon/750x1334.png" media="(device-width: 375px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
        <!-- iPhone 6 Plus/7 Plus/8 Plus -->
        <link href="/images/favicon/1242x2208.png" media="(device-width: 414px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />

Answer 2

I actually got it to work on landscape mode. I got the info here: https://gist.github.com/472519.

The issue is the landscape image has to be 748x1024 (A landscape image sideways, I rotated clockwise) instead of 1024x748.

I also had to launch the app in portrait mode first and then landscape.

Answer 3

This answer gives a convenient way to generate all 20 splash screens currently required by iOS + up-to-date HTML markup for iOS 12.1.

This includes solutions for iPhone XR, iPhone XS Max and 11" iPad Pro

Context

Safari on iOS now supports Progressive Web Apps, but implements it differently from Chrome. It does read the manifest file, but it ignores the icons declared in it.

Instead, Safari expects a list of apple-touch-startup-image tags. While the official Apple docs list this example:

<link rel="apple-touch-startup-image" href="/launch.png">

…it is misleading, because (at least as of iOS 12.1), one image is not enough and will not work. Instead, Safari expects one image per resolution.

If the splash screen is missing or incorrect, a white screen will show on load, which looks unprofessional and makes the (web)app feel slow.

---

Generating the splash screens

There are apple-touch-startup-image generators online but they're either broken or ignore Landscape altogether, and their naming conventions are not all that nice. This is easier.

Run the following command in bash in a directory containing a logo.png file and it will produce the 20 images expected by Safari (ten resolutions, for each of Portrait and Landscape):

array=( 0640x1136 0750x1334 0828x1792 1125x2436 1242x2208 1242x2688 1536x2048 1668x2224 1668x2388 2048x2732 )
for i in "${array[@]}"
do
  split=(${i//x/ })
  portrait=$i
  landscape=${split[1]}x${split[0]}
  gm convert -background white -geometry $((10#${split[0]} / 5)) "logo.png" -gravity center -extent ${portrait}  splash-portrait-${portrait}.png
  gm convert -background white -geometry $((10#${split[0]} / 5)) "logo.png" -gravity center -extent ${landscape} splash-landscape-${landscape}.png
done

This relies on GraphicsMagick, a better alternative to ImageMagick. (On macOS, with brew, it's as easy to install as brew install graphicsmagick.

Markup

Here is the HTML markup for all 20 files:

<!--
 # SPLASH SCREENS FOR iOS.
 #
 # If the splash screen is missing or incorrect, a white screen will show on load, which looks unprofessional
 # and makes the (web)app feel slow.
 #
 # Constraints:
 # - Cannot use a single image for all.
 # - The size of the image must fit that of the targeted device, else no splash screen will show.
 # - There seems to be some leeway (e.g.: pictures 40px and 60px shorter did work), but unclear how much.
 # Bottom-line: you need one splash screen per resolution and orientation.
 #
 #
 # List of devices and resolutions (AUG-2019):
 #
 #     Device              Portrait size      Landscape size     Screen size        Pixel ratio
 #     iPhone SE            640px × 1136px    1136px ×  640px     320px ×  568px    2
 #     iPhone 8             750px × 1334px    1334px ×  750px     375px ×  667px    2
 #     iPhone 7             750px × 1334px    1334px ×  750px     375px ×  667px    2
 #     iPhone 6s            750px × 1334px    1334px ×  750px     375px ×  667px    2
 #     iPhone XR            828px × 1792px    1792px ×  828px     414px ×  896px    2
 #     iPhone XS           1125px × 2436px    2436px × 1125px     375px ×  812px    3
 #     iPhone X            1125px × 2436px    2436px × 1125px     375px ×  812px    3
 #     iPhone 8 Plus       1242px × 2208px    2208px × 1242px     414px ×  736px    3
 #     iPhone 7 Plus       1242px × 2208px    2208px × 1242px     414px ×  736px    3
 #     iPhone 6s Plus      1242px × 2208px    2208px × 1242px     414px ×  736px    3
 #     iPhone XS Max       1242px × 2688px    2688px × 1242px     414px ×  896px    3
 #     9.7" iPad           1536px × 2048px    2048px × 1536px     768px × 1024px    2
 #     7.9" iPad mini 4    1536px × 2048px    2048px × 1536px     768px × 1024px    2
 #     10.5" iPad Pro      1668px × 2224px    2224px × 1668px     834px × 1112px    2
 #     11" iPad Pro        1668px × 2388px    2388px × 1668px     834px × 1194px    2
 #     12.9" iPad Pro      2048px × 2732px    2732px × 2048px    1024px × 1366px    2
 #
 # Sources:
 # - Device and resolutions (Portrait size, Landscape size) from https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/launch-screen/
 # - Screen width as measured by JavaScript's `screen.width` and `screen.height` in Simulator, except for:
 #   - 7.9" iPad mini 4 (not in Simulator): https://developer.apple.com/library/archive/documentation/DeviceInformation/Reference/iOSDeviceCompatibility/Displays/Displays.html
 #   - 9.7" iPad (not in Simulator): had to assume they meant iPad Pro.
 #
 #
 # Tested on the following devices, in Simulator with iOS 12.1, in both Portrait and Landscape:
 #   iPhone 5s, iPhone 6, iPhone 6 Plus, iPhone 6s, iPhone 6s Plus, iPhone 7, iPhone 7 Plus, iPhone 8,
 #   iPhone 8 Plus, iPhone SE, iPhone X, iPhone XS, iPhone XS Max, iPhone XR, iPad Air, iPad Air 2,
 #   iPad (5th generation), iPad Pro (9.7-inch), iPad Pro (12.9-inch), iPad Pro (12.9-inch) (2nd generation),
 #   iPad Pro (10.5-inch), iPad (6th generation), iPad Pro (11-inch), iPad Pro (12.9-inch) (3rd generation).
 # Everything worked fine (splash screen showing in every single case.)
 #
 # FYI:
 # - tvOS does not come with a browser. So the largest screen to care for is an iPad.)
 # - On all iPads (in Simulator), had to either Add to Home twice or restart the device to see the icon.
 #   WOULDDO Test on a real iPad.
 -->
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-portrait-0640x1136.png" media="(device-width:  320px) and (device-height:  568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-portrait-0750x1334.png" media="(device-width:  375px) and (device-height:  667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-portrait-0828x1792.png" media="(device-width:  414px) and (device-height:  896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-portrait-1125x2436.png" media="(device-width:  375px) and (device-height:  812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-portrait-1242x2208.png" media="(device-width:  414px) and (device-height:  736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-portrait-1242x2688.png" media="(device-width:  414px) and (device-height:  896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-portrait-1536x2048.png" media="(device-width:  768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-portrait-1668x2224.png" media="(device-width:  834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-portrait-1668x2388.png" media="(device-width:  834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-portrait-2048x2732.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">

<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-landscape-1136x0640.png" media="(device-width:  320px) and (device-height:  568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-landscape-1334x0750.png" media="(device-width:  375px) and (device-height:  667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-landscape-1792x0828.png" media="(device-width:  414px) and (device-height:  896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-landscape-2436x1125.png" media="(device-width:  375px) and (device-height:  812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-landscape-2208x1242.png" media="(device-width:  414px) and (device-height:  736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-landscape-2688x1242.png" media="(device-width:  414px) and (device-height:  896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-landscape-2048x1536.png" media="(device-width:  768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-landscape-2224x1668.png" media="(device-width:  834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-landscape-2388x1668.png" media="(device-width:  834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-landscape-2732x2048.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">

(Personally, I keep the comments in a Twig comment block so I get to keep the info without polluting the client's with too much text.)

Some examples I saw online used min-device-*, but this makes little sense in this context given Safari expects pictures in (near-)exact dimensions.

Some other examples I saw used shorter images (40 or 60px shorter, i.e. without the status bar). Older versions of iOS seem to have expected such dimensions, but this is no longer the case.

---

Parting thoughts

96% of my iOS users use iOS 12.x, so thankfully no need to care too much about older iOS versions. But if I missed something please let me know.

Where Android, like a big boy, is happy showing the app's icon as part of the splash screen, iOS and Safari force us through all this extra work. 20 images to show a simple splash screen! This is crazy! Things might get better in the future, but that's how it is for now.

This elementary task took a lot of coding and testing. I hope it'll help someone.

I'll try to keep this updated with newer resolutions. Please post a comment if you see one is missing.

Answer 4

I just wanted to offer a combination of answers that actually worked. We found with the answer that was selected, the retina versions of the splash images were not being used. Pavel's answer fixed the retina version for the iPad. The following has been tested on iPhone (Retina and non-retina) and iPad (retina and non-retina).

<!-- For third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png">
<!-- For iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">
<!-- For first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

<!-- iPhone SPLASHSCREEN-->
<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image">
<!-- iPhone (Retina) SPLASHSCREEN-->
<link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (device-height: 460px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPhone 5 (Retina) SPLASHSCREEN-->
<link href="apple-touch-startup-image-640x1096.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPad (non-Retina) (Portrait) -->
<link href="apple-touch-startup-image-768x1004.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" rel="apple-touch-startup-image" />
<!-- iPad (non-Retina) (Landscape) -->
<link href="apple-touch-startup-image-1024x748.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" rel="apple-touch-startup-image" />
<!-- iPad (Retina) (Portrait) -->
<link href="apple-touch-startup-image-1536x2008.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<!-- iPad (Retina) (Landscape) -->
<link href="apple-touch-startup-image-2048x1496.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />

I can't take credit for any of this, but this configuration works. Just copy and paste, make sure to make the images exactly the size dictated in their names.