site.webmanifest · PWA · manifest.json · Icons

Web App Manifest Generator

Q: What is a site.webmanifest?

A site.webmanifest is a JSON file that tells the browser how to display your web app. It defines the app name, icons (192×192 and 512×512 minimum), theme color, background color and display mode (standalone, fullscreen, etc.). It is required for PWA support.

Q: What icons does the manifest need?

The Web App Manifest spec requires at minimum a 192×192 icon and a 512×512 icon. The 512 px icon should have the 'maskable' purpose so the OS can crop it safely into any shape (circle, squircle, etc.).

Q: How do I add a manifest to my website?

Place site.webmanifest in your web root and add this tag to your : . Make sure the MIME type is application/manifest+json on your server.

Updated: May 2026

The site.webmanifest is the JSON file that enables browsers to treat your website as a Progressive Web App. It defines your app's name, icons, theme color and launch behavior. Our favicon generator produces a ready-to-use manifest alongside all your icon files.

Generate Manifest + Icons →

site.webmanifest · 192×192 · 512×512 · Free · No upload

What a site.webmanifest contains

The generated manifest follows the W3C Web App Manifest specification:

{
  "name": "My App",
  "short_name": "My App",
  "icons": [
    {
      "src": "favicon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "favicon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable any"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Key manifest fields

name — Full app name displayed on the home screen and splash screen.
short_name — Abbreviated name for tight spaces (home screen icon label).
icons — Array of icon objects. Minimum: 192×192 and 512×512.
theme_color — Browser UI color (address bar on Chrome Android, status bar on Safari iOS).
background_color — Splash screen background color while the app loads.
display — Display mode: standalone (no browser UI), fullscreen, browser or minimal-ui.

How to add the manifest to your site

Place site.webmanifest and all icon PNG files in your web root. Add this tag in your <head>:

<link rel="manifest" href="/site.webmanifest">

If using a CDN or subpath, make sure the manifest URL is on the same origin as your pages (or uses CORS headers). Check the Content-Type header — it should be application/manifest+json.

Maskable icons explained

Android applies a shape mask (circle, squircle, teardrop, etc.) to home screen icons. A maskable icon must have its main graphic within a central safe zone of 80% of the total canvas — the outer 10% on each side may be cropped. The purpose: "maskable any" flag in the manifest signals the browser that this icon is safe to mask.

When generating a 512×512 maskable icon, ensure your logo is centered and padded enough to survive any crop shape.

Frequently asked questions

What is a site.webmanifest?

A site.webmanifest is a JSON file that tells browsers how to install and display your web app. It lists icons, the app name, theme color and display mode. Required for PWA (Progressive Web App) support and Android "Add to Home Screen".

What icons does the manifest need?

The spec requires at minimum a 192×192 icon and a 512×512 icon. The 512 icon should have purpose: "maskable any". If your icon has padding, it can serve as a maskable icon. If not, you may need a separate padded version.

How do I add a manifest to my website?

Add <link rel="manifest" href="/site.webmanifest"> to your <head>. Place the file at the root of your domain. The server must serve it with Content-Type: application/manifest+json.

Does my site need a manifest if it's not a PWA?

Not strictly, but it's good practice. Even non-PWA sites benefit from a manifest for Android "Add to Home Screen" functionality and theme color support. It's a small file with no performance cost.