About splash-screens

Custom Splash Screen on iOS

To make your Progressive Web App even more native-like on iOS devices, you may add a custom splash screen that is displayed when users launch your app. This is a feature that has been documented in Apple's Safari Web Content Guide for a long time, but that has turned out to be more challenging to implement than they have made it seem. In fact, it appears to not have worked at all until iOS 11.0.

To add a custom launch screen, the documentation proposes the following code.

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

What is not mentioned is that the href attribute has to refer to an image that is of the exact same resolution as the iOS device that uses the app. The problem that arises here is that there are multiple iOS devices with different resolutions, and unfortunately we cannot just simply repeat this code multiple times for images of different sizes. Instead, we need to use the media attribute to specify which launch image is intended for which device.

Copy-paste the following code to the head section of your PWA to support custom splash screens for the different iOS devices.

<!-- iPhone X (1125px x 2436px) -->
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" href="/apple-launch-1125x2436.png">
<!-- iPhone 8, 7, 6s, 6 (750px x 1334px) -->
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" href="/apple-launch-750x1334.png">
<!-- iPhone 8 Plus, 7 Plus, 6s Plus, 6 Plus (1242px x 2208px) -->
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3)" href="/apple-launch-1242x2208.png">
<!-- iPhone 5 (640px x 1136px) -->
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="/apple-launch-640x1136.png">
<!-- iPad Mini, Air (1536px x 2048px) -->
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)" href="/apple-launch-1536x2048.png">
<!-- iPad Pro 10.5" (1668px x 2224px) -->
<link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)" href="/apple-launch-1668x2224.png">
<!-- iPad Pro 12.9" (2048px x 2732px) -->
<link rel="apple-touch-startup-image" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)" href="/apple-launch-2048x2732.png">

Do not forget that in order to have a custom launch screen, your app needs to be mobile web app capable, which can be accomplished with the following meta tag.

<meta name="apple-mobile-web-app-capable" content="yes">

iOS Splash Screen Generator

Use this easy tool to generate all the different sizes needed and the accompanying HTML code.

1. Choose image → 2. Customize options → 3. Add to your PWA

Choose an image (for example your logo) to be used in the splash screens.