PWA Manifest Generator
Create a web app manifest.json for your Progressive Web App — all in your browser
Examples
Create a portrait standalone app manifest
name: Field Notes
short name: Notes
description: Capture ideas offline.
start URL: /notes
display: standalone
orientation: portrait
theme color: #0f766e
background color: #f0fdfa{
"name": "Field Notes",
"short_name": "Notes",
"description": "Capture ideas offline.",
"start_url": "/notes",
"display": "standalone",
"orientation": "portrait",
"theme_color": "#0f766e",
"background_color": "#f0fdfa",
"icons": [
{
"src": "/icons/icon-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "/icons/icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any maskable"
}
]
}The selected portrait orientation is included, and the generator adds the two fixed 192px and 512px maskable icon paths.
Use fallbacks for optional fields
name: Docs
short name: empty
description: empty
start URL: empty
display: browser
orientation: any
theme color: #111827
background color: #ffffff{
"name": "Docs",
"short_name": "Docs",
"start_url": "/",
"display": "browser",
"theme_color": "#111827",
"background_color": "#ffffff",
"icons": [
{
"src": "/icons/icon-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "/icons/icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any maskable"
}
]
}Blank short_name falls back to name, blank start_url becomes /, blank description is omitted, and orientation any is omitted.
About this tool
A web app manifest tells a browser how a Progressive Web App should appear when it is installed: its full name, abbreviated name, launch URL, display mode, colors and preferred orientation. This generator turns those fields into a ready-to-save manifest.json file without making you remember the underscore-based property names.
The form emits the name, short_name, description, start_url, display, theme_color and background_color properties, plus two fixed PNG icon entries at /icons/icon-192.png and /icons/icon-512.png with any maskable purpose. An empty short name falls back to the full name, an empty start URL becomes /, and the orientation property is omitted when it is set to any.
Everything is assembled in the browser. Copy the generated JSON, save it as manifest.json, and link it from the document with a manifest link element before testing installation and display behavior in a browser.
How to use
Enter the app identity
Fill in the full Name, an optional Short name, and a Description. The short name is the compact label a browser may use where space is limited.
Set the launch behavior
Choose the Start URL, Display mode, and Orientation. Leave Start URL blank to generate /, and choose any when you do not want an orientation property in the output.
Choose the colors
Set the Theme color and Background color with the color picker or the adjacent text field.
Copy and install
Copy manifest.json, save it at your site root, link it with <link rel="manifest" href="/manifest.json">, and test the resulting install experience in a browser.
Use cases
Scaffolding an installable web app
Fill in the identity, launch path, colors and display mode to create the manifest file for a new PWA before adding the browser-specific install checks.
Adding a manifest to an existing SPA
Generate the JSON for a single-page application, save it at the site root, and link it from the document without hand-translating form fields into manifest property names.
Testing mobile orientation behavior
Use portrait or landscape explicitly in a test manifest to check how an installed app behaves on a phone or tablet.
Keeping icon paths consistent
Use the generated icon entries as the expected contract for the 192px and 512px PNG files in your public icons directory.
Common mistakes
Mistake:Expecting the generator to upload or create the icon files.
Fix:The output only references /icons/icon-192.png and /icons/icon-512.png. Create those PNG assets at those paths or update the generated JSON yourself before deploying.
Mistake:Leaving the short name blank and assuming the property will disappear.
Fix:An empty short name is replaced with the full name, so provide a compact value when the installed label needs to fit a narrow surface.
Mistake:Adding orientation: any by hand after choosing any in the form.
Fix:The generator deliberately omits orientation when it is any; absence already means the manifest does not request a fixed orientation.
Mistake:Saving the JSON without linking it from the page.
Fix:Save the file as manifest.json at the expected public path and add a manifest link element so the browser can discover it.
Frequently asked questions
Related guides
Make Your Site Installable: The Web App Manifest
What the web app manifest does, the fields that control the install prompt and splash screen, and the icon requirements browsers actually enforce.
Four Files Every Production Website Should Have
robots.txt, sitemap.xml, security.txt, and the web app manifest — the small root-level files that improve crawling, security, and installability.
References & standards
Related tools
Address Generator
Generate realistic addresses in the correct format for 21 countries — single-line, multi-line, JSON or HTML — plus a postcode validator. Test data only, runs in your browser.
ASCII Text Art Generator
Turn text into large ASCII art banners with multiple figlet fonts
Credit Card Generator
Generate Luhn-valid test credit card numbers for development and QA (not real cards)
Driver's License Generator
Generate driver's license numbers in the correct format for 21 countries and all 50 US states, plus a format and Luhn validator — test data only, runs in your browser.
Email Signature Generator
Build a clean, cross-client HTML email signature — name, title, company, and contact links with an accent color and a live preview
Favicon Generator
Generate favicons (16x16, 32x32) from any image.