Don't like ads? Go Ad-Free Today 

PWA Web App Manifest Generator

DataDeveloper

ADVERTISEMENT · REMOVE?

INPUT

Auto Process

App Identity

Name

Full app name shown on install prompt and splash screen

Short Name

Used on home screen (recommended: 12 characters or less)

Description

Lang

Primary language (BCP 47 tag, e.g. en-US, fr, de-DE)

Text Direction

Navigation

Start URL

URL opened when the app launches

Scope

Navigation boundary for the app (optional)

App ID

Unique identity for the app (optional, recommended)

Display

Display Mode

Orientation

Theme Color

Colors the browser toolbar/status bar when the app is open

Background Color

Background color on the splash screen while the app loads

Icons

Icons Base Path

Folder path where your icon files live (used to build src URLs)

Icon Filename Pattern

Use {size} as placeholder — replaced with each selected size

Icon MIME Type

Icon Purpose

Include 72×72

Include 96×96

Include 128×128

Include 144×144

Include 152×152

Include 192×192

Include 384×384

Include 512×512

OUTPUT

Client Side

manifest.json

HTML Link Tag

ADVERTISEMENT · REMOVE?

Guide

PWA Web App Manifest Generator

Build a valid manifest.json file for your Progressive Web App in seconds. Fill in your app’s identity, choose a display mode, pick the icon sizes you ship, and the generator produces clean JSON you can drop straight into your project — plus the matching <link rel="manifest"> tag for your HTML.

How to Use

Enter your app’s Name and Short Name. The full name appears on the install prompt; the short name is what shows under the home-screen icon.
Set the Start URL, Scope, and optional App ID so the browser knows what to launch and how to scope navigation.
Pick a Display Mode (standalone, fullscreen, minimal-ui, browser) and an Orientation.
Choose a Theme Color (browser chrome) and a Background Color (splash screen).
Set the Icons Base Path and a Filename Pattern using {size} as a placeholder, then tick the icon sizes you actually ship.
Copy the generated manifest.json or click the download icon. Paste the <link rel="manifest"> tag into your <head>.

Features

All standard manifest fields – name, short_name, description, lang, dir, id, start_url, scope, display, orientation, theme_color, background_color.
Icon size checklist – 72, 96, 128, 144, 152, 192, 384, and 512 px, with auto-built src URLs from a base path and filename pattern.
Icon purpose support – any, maskable, “any maskable”, and monochrome.
Live JSON preview – pretty-printed JSON updates as you type, with syntax highlighting.
Installability checks – warns when name, start_url, or the recommended 192/512 icon pair are missing.
Copy or download – one-click copy, or download as manifest.json with the correct MIME type.
HTML link tag – ready-to-paste <link rel="manifest"> snippet.
100% client-side – nothing leaves your browser. No accounts, no quotas.

 FAQ

What is a web app manifest?

A web app manifest is a JSON file that tells the browser how your Progressive Web App should behave when installed. It carries the app's name, icons, start URL, display mode, theme colors, and other metadata used by the install prompt, splash screen, and home-screen launcher.
Which fields are required for a PWA to be installable?

At a minimum, browsers expect name (or short_name), start_url, display set to standalone, fullscreen, or minimal-ui, and at least one 192x192 plus one 512x512 icon. Adding theme_color and background_color is strongly recommended for a polished install experience.
What is the difference between display modes?

standalone hides the browser UI and looks like a native app. fullscreen also hides the status bar, useful for games. minimal-ui keeps a small set of browser controls. browser opens the app in a normal tab. Most PWAs choose standalone.
What does the icon purpose field mean?

purpose tells the browser how an icon may be rendered. any is the default and lets the browser composite the icon however it wants. maskable means the image is designed to fill an OS-defined safe zone, so the launcher can crop it into a circle, squircle, or rounded square without clipping important content.
Where should I put manifest.json and the link tag?

Place manifest.json at the root of your site or under a stable path, then reference it from every HTML page with a tag inside the . Make sure the file is served with the application/manifest+json content type.