# Splash screens — Progressive Web Apps: Offline, Installable Web Apps

Source: https://www.skillbyai.com/en/pwa/pwa-splash-screens

> Understand how browsers build launch splash screens from manifest name, icons and background_color, and handle iOS.

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

```json
{
  "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.