PWA App Icon and Splash Screen Placeholder Strategy

Manifest icons

What happens when PWA icon URLs fail

The web app manifest requires at least one icon sized 192×192 and one sized 512×512 for Chrome to display a PWA install prompt. If the 192×192 icon URL returns a 404, Chrome shows a default browser icon on the home screen. If the 512×512 URL fails, the splash screen shows no image.

Safari on iOS has stricter requirements: it uses apple-touch-icon link tags rather than the manifest, and a missing icon prevents the home screen icon from rendering correctly after installation.

During development — when your production CDN is not yet configured, or when you're testing against a staging environment with incomplete assets — fallback.pics icon-sized URLs let you complete the manifest without blocking on asset uploads.

Development placeholders

Placeholder icon URLs for the web app manifest

Fallback.pics square route generates square images at any size. Use it for every icon size in your manifest during development. The URLs are deterministic, cacheable, and work from any origin including localhost.

Keep the manifest placeholder separate from your production icon configuration. Use environment variables to swap between placeholder and production URLs at build time.

// manifest.webmanifest (development)
{
  "name": "My App",
  "short_name": "App",
  "theme_color": "#7C3AED",
  "background_color": "#FFFFFF",
  "display": "standalone",
  "icons": [
    {
      "src": "https://fallback.pics/api/v1/square/192?text=APP&bg=7C3AED&fg=FFFFFF",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "https://fallback.pics/api/v1/square/512?text=APP&bg=7C3AED&fg=FFFFFF",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ]
}

// astro.config.mjs or vite.config.ts — swap via env
const iconBase = import.meta.env.PROD
  ? '/icons'
  : 'https://fallback.pics/api/v1/square';

Splash screen

Generating splash screen placeholders for PWA testing

Chrome on Android generates the PWA splash screen from the manifest's name, background_color, and the 512×512 icon. You don't create a splash screen image manually — Chrome constructs it. Providing a valid 512×512 icon URL is sufficient.

Safari on iOS requires explicit apple-touch-startup-image link tags for custom splash screens. These must be exact pixel dimensions for each device. During development, fallback.pics banner URLs at the correct dimensions let you test splash screen layout without creating device-specific assets.

<!-- index.html — splash screen placeholders for iOS development -->
<!-- iPhone 14 Pro Max 430×932 -->
<link rel="apple-touch-startup-image"
  href="https://fallback.pics/api/v1/1290x2796/7C3AED/FFFFFF?text=Loading"
  media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3)">

<!-- iPhone SE 375×667 -->
<link rel="apple-touch-startup-image"
  href="https://fallback.pics/api/v1/750x1334/7C3AED/FFFFFF?text=Loading"
  media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)">

<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" sizes="180x180"
  href="https://fallback.pics/api/v1/square/180?text=APP&bg=7C3AED&fg=FFFFFF">

Maskable icons

Safe zone requirements for maskable PWA icons

Maskable icons are cropped to different shapes depending on the device launcher. The safe zone is a circle that covers the center 80% of the icon. Anything outside that circle may be clipped. Fallback.pics square icons center text in the middle of the image, making them safe to use as maskable placeholders.

Declare purpose: 'any maskable' only when your icon is intentionally designed for masking. Using a non-maskable icon with that declaration causes Chrome to crop off critical parts of the design on adaptive icon launchers.

Service worker

Caching icon URLs in the service worker install step

Include your icon URLs in the service worker's precache list so they are available offline from first install. Workbox's precacheAndRoute handles this automatically when you list the icon assets in the manifest.

For fallback.pics URLs used as development placeholders, cache them explicitly with a NetworkFirst strategy so they update when the CDN response changes.

// service-worker.js (Workbox)
import { precacheAndRoute, cleanupOutdatedCaches } from 'workbox-precaching';
import { registerRoute } from 'workbox-routing';
import { NetworkFirst } from 'workbox-strategies';

precacheAndRoute(self.__WB_MANIFEST);

// Cache fallback.pics placeholder icons
registerRoute(
  ({ url }) => url.hostname === 'fallback.pics',
  new NetworkFirst({ cacheName: 'placeholder-icons', networkTimeoutSeconds: 3 })
);

Resources

Manifest icon sizes and fallback.pics routes

These routes cover all standard PWA icon sizes. Replace them with production assets before shipping.

// Standard PWA icon placeholders
https://fallback.pics/api/v1/square/72?text=APP&bg=7C3AED&fg=FFFFFF
https://fallback.pics/api/v1/square/96?text=APP&bg=7C3AED&fg=FFFFFF
https://fallback.pics/api/v1/square/128?text=APP&bg=7C3AED&fg=FFFFFF
https://fallback.pics/api/v1/square/144?text=APP&bg=7C3AED&fg=FFFFFF
https://fallback.pics/api/v1/square/152?text=APP&bg=7C3AED&fg=FFFFFF
https://fallback.pics/api/v1/square/192?text=APP&bg=7C3AED&fg=FFFFFF
https://fallback.pics/api/v1/square/384?text=APP&bg=7C3AED&fg=FFFFFF
https://fallback.pics/api/v1/square/512?text=APP&bg=7C3AED&fg=FFFFFF

https://fallback.pics/docs/
https://fallback.pics/placeholder-image-api/
https://fallback.pics/blog/service-worker-placeholder-cache/
https://fallback.pics/blog/ionic-capacitor-image-fallbacks/