Adding Custom iOS Splash Screens To Your Progressive Web App
Appscope
2261

This post helped me a lot, thanks! I completed the list with all current iOS devices as listed on https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/launch-screen/

The lines below also contain variants for portrait and landscape. Adding them wasn't completely obvious to me as it's not done by exchanging the device-height and device-width queries.


<! — iPhone SE →
<link rel=”apple-touch-startup-image” media=”(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)” href=”launch-640x1136.png”>
<link rel=”apple-touch-startup-image” media=”(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)” href=”launch-1136x640.png”>
<! — iPhone 6s, 7, 8 →
<link rel=”apple-touch-startup-image” media=”(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)” href=”launch-750x1334.png”>
<link rel=”apple-touch-startup-image” media=”(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)” href=”launch-1334x750.png”>
<! — iPhone XR →
<link rel=”apple-touch-startup-image” media=”(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)” href=”launch-828x1792.png”>
<link rel=”apple-touch-startup-image” media=”(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)” href=”launch-1792x828.png”>
<! — iPhone X, Xs →
<link rel=”apple-touch-startup-image” media=”(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)” href=”launch-1125x2436.png”>
<link rel=”apple-touch-startup-image” media=”(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)” href=”launch-2436x1125.png”>
<! — iPhone 6s Plus, 7 Plus, 8 Plus →
<link rel=”apple-touch-startup-image” media=”(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)” href=”launch-1242x2208.png”>
<link rel=”apple-touch-startup-image” media=”(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)” href=”launch-2208x1242.png”>
<! — iPhone Xs Max →
<link rel=”apple-touch-startup-image” media=”(device-width: 414px) and (device-height: 869px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)” href=”launch-1242x2688.png”>
<link rel=”apple-touch-startup-image” media=”(device-width: 414px) and (device-height: 869px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)” href=”launch-2688x1242.png”>
<! — 7.9" iPad Air, mini 4, 9.7" iPad →
<link rel=”apple-touch-startup-image” media=”(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)” href=”launch-1536x2048.png”>
<link rel=”apple-touch-startup-image” media=”(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)” href=”launch-2048x1536.png”>
<! — 10.5" iPad Pro →
<link rel=”apple-touch-startup-image” media=”(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)” href=”launch-1668x2224.png”>
<link rel=”apple-touch-startup-image” media=”(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)” href=”launch-2224x1668.png”>
<! — 11" iPad Pro →
<link rel=”apple-touch-startup-image” media=”(device-width: 844px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)” href=”launch-1688x2388.png”>
<link rel=”apple-touch-startup-image” media=”(device-width: 844px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)” href=”launch-2388x1688.png”>
<! — 12.9" iPad Pro →
<link rel=”apple-touch-startup-image” media=”(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)” href=”launch-2048x2732.png”>
<link rel=”apple-touch-startup-image” media=”(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)” href=”launch-2732x2048.png”>