Splash screens

Splash screen purpose

Browsers build the launch splash screen automatically from the manifest name, icons and background_color. Set those well, and keep the first paint fast. iOS needs apple-touch-startup-image links for custom splash images.

Configure splash screen images

Set name, icons and background_color in the manifest; screenshots is used for the install dialog, not the splash screen.

{
  "name": "My Todo App",
  "background_color": "#ffffff",
  "theme_color": "#8f5cf6",
  "icons": [
    { "src": "/images/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/images/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "screenshots": [
    { "src": "/images/screenshot-1.png", "sizes": "540x720", "type": "image/png", "form_factor": "narrow" }
  ]
}

A common trap

Splash screens should load quickly—keep images under 100KB. Use responsive images for different device sizes.