Configured for a custom splash screen

A custom splash screen makes your progressive web app (PWA) feel more like a native app.

When a user launches your PWA from the homescreen, Android's default behavior is to display a white screen until the PWA is ready. The user may see a blank, white screen for up to 200ms. With a custom splash screen, the user sees a custom background color and your PWA's icon instead.

See Adding a Splash Screen for Installed Web Apps in Chrome 47 for more information.

Lighthouse flags when the page isn't configured for a splash screen:

Lighthouse audit showing site isn't configured for a custom splash screen
Site isn't configured for a custom splash screen.

Recommendations

Chrome for Android automatically shows your custom splash screen so 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 512px by 512px.
  • The icon exists and is a PNG.

See Audit: icon size coverage for a discussion on what icon sizes should be included in your project. Lighthouse's opinion is that a single, 512px icon is sufficient, but other members of the Google Web Developer Relations team have different opinions.

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.

More information

Page isn't configured for a splash screen audit source code

Last updated: Improve article