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

Answer 1

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:

…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:

(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.