Learn Measure Blog About

Is not configured for a custom splash screen

Updated

A custom splash screen makes your Progressive Web App (PWA) feel more like a native app. 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

Each PWA audit is weighted equally in the Lighthouse PWA Score, except for three manual audits: Site works cross-browser, Page transitions don't feel like they block on the network, and Each page has a URL. Learn more in the Lighthouse Scoring Guide.

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 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.

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

Last updated: Improve article