A custom splash screen makes your Progressive Web App (PWA) feel more like an app built for that device. By default, when a user launches your PWA from the home screen, Android displays a white screen until the PWA is ready. The user may see this blank, white screen for up to 200 ms. By setting up a custom splash screen, you can show your users a custom background color and your PWA's icon, providing a branded, engaging experience.
How the Lighthouse splash screen audit fails
Lighthouse flags pages that don't have a custom splash screen:
![Lighthouse audit showing site isn't configured for a custom splash screen](/static/docs/lighthouse/pwa/splash-screen/image/lighthouse-audit-showing-fe5584ed50ec4.png)
How to create a custom splash screen
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 color value. - The
theme_color
property is set to a valid CSS color value. - The
icons
array specifies an icon that is at least 512x512 px. - The specified icon exists and is a PNG.
See Adding a Splash Screen for Installed Web Apps in Chrome 47 for more information.
Resources
Source code for Is not configured for a custom splash screen audit