PWA Icon 512x512 — Splash Screen and App Store Favicon

PWA Icon 512x512

The 512x512 pixel icon is the largest standard favicon size and serves as the primary icon for Progressive Web Apps. It appears in splash screens, app store listings, and rich install prompts.

Where 512x512 Is Used

• PWA Splash Screen — The loading screen shown when a user opens an installed PWA
• Install Prompt — The icon displayed in the browser's "Add to Home Screen" dialog
• App Stores — Some app stores (like the Microsoft Store for PWAs) use this as the listing icon
• Rich Results — Search engines may use this icon for enhanced search result displays

Splash Screen Requirements

For the PWA splash screen to work correctly, you need:

1. A valid manifest.json with a 512x512 icon
2. A background_color defined in the manifest
3. A name or short_name field

The splash screen layout is automatically generated:

┌──────────────────────────┐
│                          │
│                          │
│      ┌──────────┐        │
│      │          │        │
│      │  512x512 │        │
│      │   icon   │        │
│      │          │        │
│      └──────────┘        │
│                          │
│       App Name           │
│                          │
│                          │
└──────────────────────────┘
  background_color fill

Design at Full Resolution

At 512x512, you have the luxury of including:

• Full logo details and gradients
• Text elements if part of your brand
• Subtle shadows and depth effects
• Complex illustrations

However, remember this same icon may be scaled down, so:

• Keep the core symbol centered and prominent
• Avoid relying on tiny details that disappear at smaller sizes
• Test how the design looks when shrunk to 192x192 and smaller

Manifest Configuration

{
  "icons": [
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    }
  ]
}