Do I need to generate the icon files too?

You can. Upload a logo in the "App icon & maskable preview" section to generate real 192x192, 512x512 and Android maskable icon files alongside the manifest - or skip it and use the Favicon Generator's icons instead.

What is a maskable icon, and why does padding matter?

Android can crop your icon into a circle, squircle or other shape depending on the device. Keeping your artwork inside the safe-zone padding (shown in the live preview) means it survives any of those shapes without being cut off.

Where do I put this file?

Save it as site.webmanifest in your site's root directory and link it from your HTML with .

Web App Manifest Generator

Generate a manifest.json for your PWA.

Create a production-ready web app manifest with icons, maskable previews, shortcuts and an installability checker for installable web apps.

Meets PWA installability requirements

App name is set
Short name is set (shown under home screen icons)
start_url is set
Display mode allows installing (not "browser")
Includes 192×192 and 512×512 icons
Includes a maskable icon (recommended for Android)

App details

App name

Short name

Description

Start URL

Display

Orientation

Theme color

Background color

Advanced fields

Scope

App ID

Categories (comma separated)

Text direction

Language

App icon & maskable preview

Upload your logo once to generate real 192×192 / 512×512 icons plus Android maskable variants, and preview how OEM mask shapes will crop them.

Click to upload or drag and drop

JPG, PNG, GIF, WebP or SVG, up to 100 MB

Shortcuts

App shortcuts appear on a long-press of your installed icon.

Related applications

Fallback native apps to offer instead of, or alongside, the PWA.

Simulated device preview

My App

Splash screen

yoursite.com

Page content

Mobile address bar

My App

yoursite.com

Install

Install prompt

Add this to your HTML <head>

<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#2563eb">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="My App">

Icon paths reference the files above once generated, or fall back to the Favicon Generator's Android Chrome icons if you haven't uploaded a logo here.

{
    "name": "My App",
    "short_name": "My App",
    "start_url": "/",
    "scope": "/",
    "lang": "en",
    "display": "standalone",
    "orientation": "any",
    "theme_color": "#2563eb",
    "background_color": "#ffffff",
    "icons": [
        {
            "src": "/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}

How to use this tool

1
Fill in your app details
Name, colors, start URL, display mode and advanced fields.
2
Upload an icon (optional)
Preview the maskable safe zone and generate real icon files.
3
Add it to your site
Download the manifest and icons, then link them from your HTML head.

Frequently asked questions

Favicon Generator

Generate a full favicon set from one image.

robots.txt Generator

Generate a robots.txt file for search engines.

Sitemap Generator

Crawl your site and generate an XML sitemap automatically.

Your file is processed temporarily and deleted immediately after you download the result. We never store it permanently or keep a copy.

Have feedback about this tool?