apple-touch-startup-image (iOS Splash Screens)
apple-touch-startup-image is a link tag that sets the splash screen iOS shows while a home-screen web app launches. Unlike the icon, it isn't one file: iOS wants a separate, exactly-sized image per device resolution and orientation, each selected with a media query. It's fiddly enough that many sites skip it or generate the whole set with a tool.
One image per device, chosen by media query
iOS won't scale a single splash image to fit. It matches on exact device pixel dimensions and orientation, so each device needs its own apple-touch-startup-image link with a media query that targets that screen. There's no catch-all fallback.
That means a proper set is a dozen or more link tags, and the list changes as Apple ships new screen sizes, which is why it's usually generated rather than hand-written.
One entry from the set
<link
rel="apple-touch-startup-image"
media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3)"
href="/splash/iphone-12.png"
/>Repeated once per target device and orientation, each with its own media query and exactly-sized image.
iOS splash screen FAQ
What is apple-touch-startup-image?
A link tag that defines the splash screen iOS shows while a home-screen web app is launching, before the page has rendered.
Why do I need so many of them?
iOS matches an exact image to each device's resolution and orientation with a media query, and won't scale one image to fit, so every target device needs its own entry.
Do I need a splash screen at all?
Only if your site is installed to the iOS home screen and you want a branded launch. For a normal website it does nothing, so most sites skip it.