Progressive Web Apps: Custom Splash Screen
Tags: webdev, progressivewebapp, pwa, tutorial
Published: 2018-10-22 17:12:34

---
title: Progressive Web Apps: Custom Splash Screen
published: true
description: How to customize splash screen for progressive web app
tags: webdev,progressivewebapp,pwa,tutorial
---

The splash screen appears instantly when your app starts up. If your app is heavy, it might take a few seconds to load the app depending on the device's configurations. By default, both Android and iOS show a plain white screen as the splash screen for web apps. It is always better to customize the splash screen to provide a complete app experience.

In order to change the splash screen of your progressive web app, you must use the configure few properties for your app to provide complete native look and feel.

### Android

Chrome for Android automatically shows your custom splash screen as long as you meet the following requirements in your web app manifest:

- The `name` property is set to the name of your PWA.
- The `background_color` property is set to a valid CSS colour value.
- The `icons` array specifies an icon that has 512px by 512px size icon.
- The icon exists and is a PNG.

It will also show the app name below the icon using the `name` property. The text colour cannot be customized. It is contrast based [according to this post](https://github.com/w3c/manifest/issues/642#issuecomment-360777137).

### iOS

iOS does not support a similar method of automatically generating a splash screen. Instead, you need to provide splash screens tailored for each iOS device using the `apple-touch-startup-image` HTML meta tag. We can use the [media](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attr-media) attribute and media queries to load device specific images.

```html
<link rel="apple-touch-startup-image" href="assets/splashscreens/iphone5_splash.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" />
<link rel="apple-touch-startup-image" href="assets/splashscreens/iphone6_splash.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" />
<link rel="apple-touch-startup-image" href="assets/splashscreens/iphoneplus_splash.png" media="(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3)" />
<link rel="apple-touch-startup-image" href="assets/splashscreens/iphonex_splash.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" />
<link rel="apple-touch-startup-image" href="assets/splashscreens/ipad_splash.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)" />
<link rel="apple-touch-startup-image" href="assets/splashscreens/ipadpro1_splash.png" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)" />
<link rel="apple-touch-startup-image" href="assets/splashscreens/ipadpro2_splash.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)" />
```

You can generate images for all the resolutions using this [tool](https://appsco.pe/developer/splash-screens) by Appsco. They also have an option where you can use only your logo and a background colour to generate these images.

Keep your app's splash screen updated with the different sizes of iOS devices available [here](https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/launch-screen#static-launch-screen-images).

### Live Demo

Open the app and click on "Add to Home Screen" - [Headlines App](https://headlines-pwa.firebaseapp.com)

<div style="text-align:center">
<img src="https://i.imgur.com/19OPpMK.gif" height="300px" />
</div>

### References

[Android: Custom Splash Screen](https://developers.google.com/web/tools/lighthouse/audits/custom-splash-screen)

[Safari: Specifying a Launch Screen Image](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW6)