Learn

Add Manifest And Icons

Use a stable manifest before you test install behavior.

Steps

  1. Create public/manifest.webmanifest.
  2. Add stable id, start_url, and scope.
  3. Add name, short_name, and description.
  4. Set display to standalone unless you have a reason not to.
  5. Add theme_color and background_color.
  6. Generate 192, 512, and maskable icons.
  7. Add screenshots if install UI or store packaging matters.
  8. Link the manifest from HTML.
  9. Validate in DevTools Application, Manifest.

Icon Rules

IconWhy
192x192Common install and launcher size
512x512Higher-resolution install and store surfaces
maskable 512x512Adaptive icons on Android and other launchers
monochrome or shortcuts iconsOptional launcher and shortcut enhancements

Validation Checklist

  • Manifest fetches with a valid content type.
  • All icon URLs resolve with correct dimensions.
  • Maskable icon has safe padding.
  • start_url loads without auth loops.
  • scope includes the app routes but excludes unrelated site pages.
  • id is stable and not derived from a temporary URL.