What is a web app manifest?

A web app manifest is a small JSON file (typically site.webmanifest or manifest.json) that tells the browser how your site should behave when installed: its name, icons, theme and background colors, display mode, and start URL. It is what turns a website into an installable Progressive Web App.

site.webmanifest or manifest.json - which name?

Either works; the filename does not matter as long as your points to it and it is served as JSON. site.webmanifest is a common convention, manifest.json and manifest.webmanifest are equally valid.

Which icons does the manifest need?

At minimum a 192x192 and a 512x512 PNG. Add a separate 512x512 entry with purpose "maskable" and a safe zone so adaptive Android launchers can crop it into circles or squircles without clipping your logo.

What does purpose maskable mean?

Maskable icons keep their important artwork inside a central safe zone (roughly the inner 80%) so Android's adaptive icon shapes can crop the edges without cutting off your logo. Declare it with "purpose": "maskable" in the icons array.

Back to generator

The Web App Manifest, Explained

A web app manifest is a small JSON file - usually named site.webmanifest - that tells the browser your app's name, icons, theme colors, and how to launch it. It is what makes a website installable as a Progressive Web App. This guide explains every key and gives you a copy-paste example you can ship today.

Last updated: 13 June 2026

What the web app manifest is

The web app manifest is a JSON file that describes your website as an application. When a browser reads it, your site can be installedto a phone home screen or desktop, launch in its own window without browser chrome, show a branded splash screen, and use a themed toolbar. It is the bridge between "a website" and "an installable app," and it owns the Android and PWA icons that the rest of your favicon set does not cover.

The file is commonly named site.webmanifest, though manifest.json and manifest.webmanifest are equally valid - the name only has to match your link tag. You connect it to your pages with a single tag in the <head>:

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

A copy-paste site.webmanifest example

This is a complete, production-ready manifest. Swap in your own name, colors, and icon paths:

{
  "name": "Your App Name",
  "short_name": "App",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/maskable-icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "theme_color": "#111317",
  "background_color": "#ffffff",
  "display": "standalone",
  "start_url": "/"
}

What each key does

name - the full app name shown on the install prompt and splash screen.
short_name - the short label shown under the icon on the home screen, where space is tight.
icons - an array of your app icons. Each entry has a src, sizes, type, and purpose. Include a 192x192 and a 512x512 with purpose: "any", plus a separate 512x512 with purpose: "maskable".
theme_color - tints the browser toolbar and Android task switcher. Pair it with a matching <meta name="theme-color"> tag.
background_color - the splash-screen background shown while the app loads, before your CSS paints.
display - how the app launches. standalone hides browser chrome for an app-like feel; browser opens in a normal tab.
start_url - the page the app opens to when launched from the home screen, usually /.

Why the maskable icon matters

Android uses adaptive icons: it crops your icon into a circle, squircle, or rounded square depending on the device. A normal icon can get its edges clipped. A maskable icon is drawn with a safe zone - keep your logo inside roughly the central 80% and let the background fill the corners - so it survives any mask without losing the mark. That is why the example above includes a dedicated purpose: "maskable" entry alongside the standard ones.

How to add a web app manifest

Create the file. Add a site.webmanifest (or manifest.json) file at your site root containing your name, short_name, icons array, theme_color, background_color, display and start_url.
Add the 192 and 512 icons. Reference a 192x192 and a 512x512 PNG with purpose "any", plus a separate 512x512 entry with purpose "maskable" so adaptive Android launchers can crop it safely.
Link it from your HTML. Add <link rel="manifest" href="/site.webmanifest"> inside your page's <head> so the browser loads it.
Verify in DevTools. Open Chrome DevTools, go to Application, then Manifest, and confirm the name, icons and colors load with no warnings and the install prompt is available.

Frequently asked questions

What is a web app manifest?: A web app manifest is a small JSON file (typically site.webmanifest or manifest.json) that tells the browser how your site should behave when installed: its name, icons, theme and background colors, display mode, and start URL. It is what turns a website into an installable Progressive Web App.
site.webmanifest or manifest.json - which name?: Either works; the filename does not matter as long as your <link rel="manifest"> points to it and it is served as JSON. site.webmanifest is a common convention, manifest.json and manifest.webmanifest are equally valid.
Which icons does the manifest need?: At minimum a 192x192 and a 512x512 PNG. Add a separate 512x512 entry with purpose "maskable" and a safe zone so adaptive Android launchers can crop it into circles or squircles without clipping your logo.
What does purpose maskable mean?: Maskable icons keep their important artwork inside a central safe zone (roughly the inner 80%) so Android's adaptive icon shapes can crop the edges without cutting off your logo. Declare it with "purpose": "maskable" in the icons array.

Get a ready-made manifest and icons

Logo2Favicon writes a valid site.webmanifest for you - with the 192, 512, and maskable icons already wired up - alongside the generated icon files and the exact <head> snippet, so your references and files always line up. Drop your logo into the generator on the homepage; everything is produced privately in your browser, free, with nothing uploaded.

Want the full PWA checklist with testing tips? Read PWA icons and the web manifest checklist. For sizing, see the favicon sizes guide and the icon size cheatsheet.