Is not configured for a custom splash screen

Caution: PWA testing in Lighthouse is deprecated. For more information on its deprecation see Chrome's updated Installability Criteria. For guidance on testing, refer to the PWA documentation.

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:

Note: In the Lighthouse report UI the full PWA badge is given when you pass all of the audits in all of the PWA subcategories (Fast and reliable, Installable, and PWA optimized).

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.

Note: While Lighthouse's audit will pass when a single 512x512 px icon is present, there is some disagreement about what icons a PWA should include. See Audit: icon size coverage for a discussion about the pros and cons of different approaches.

Resources

Source code for Is not configured for a custom splash screen audit