Skip to content
DevLab

📱 Web App Manifest Generator

Build a manifest.json for your PWA from a form: name, start_url, display, theme_color, an icons table at multiple sizes, shortcuts, share_target, and protocol_handlers. Outputs the HTML link tag too.

100% Free No signup Browser-only 5 languages Dark mode

🔒 About Privacy

Basic info

Icons (size and src)

Checked sizes are emitted in the icons array. The type is inferred from the src extension.

App shortcuts (up to 4)


    
    






    
📖 Where people get stuck


        
Builds the manifest.json a PWA needs, from a form. Alongside name, start_url, display and theme_color, it covers multiple icons sizes, shortcuts, share_target and protocol_handlers, and emits the HTML link tag as well. Everything runs in the browser. A manifest alone, however, does not make an app installable — being judged installable requires HTTPS, a service worker, the required fields, and icons at the prescribed sizes. When the install button does not appear despite a manifest being present, the cause is usually outside the manifest.

    
        

        

            
                

                    Case
                    What happens
                    What to do
                

            
            
                                

                    Installability is not satisfied by the manifest alone
                    For a browser to offer installation, several conditions must all hold: HTTPS (or localhost), a registered service worker with a fetch handler, a name or short_name, a start_url, a display of standalone, fullscreen or minimal-ui, and icons at 192px and 512px. Miss one and there is no error; the button simply never appears — not being told what is missing is the hardest part. On top of that, Safari on iOS ignores much of the manifest — the icon used when adding to the home screen comes from apple-touch-icon, and the display mode is governed by apple-mobile-web-app-capable.
                    Do not guess — open Application > Manifest in Chrome DevTools. It lists the unmet conditions in plain sentences — whether you look at that screen changes time-to-resolution by hours. The Lighthouse PWA audit performs the same checks mechanically. A service worker being registered is not enough — a fetch event handler has to actually exist, so an empty sw.js does not satisfy the requirement. If you also target iOS, add apple-touch-icon at 180 by 180 and apple-mobile-web-app-title to your HTML separately from the manifest — polishing only the manifest changes nothing on iOS.
                

                                

                    How start_url and scope resolve
                    Both resolve relative to the location of the manifest file, not the site root. With the manifest at /static/manifest.json, writing "start_url": "index.html" makes the launch URL /static/index.html — and if that does not exist, the app installs fine and then opens to a 404. scope reaches further: it defines the range of URLs that stay inside the app window, and following a link outside it kicks you out to the browser. Its default, when omitted, is also the manifest location, so leaving it at /static/ and writing nothing puts your entire site outside the scope. And if start_url falls outside scope, the app is not judged installable at all.
                    Write both as absolute paths with a leading slash — "start_url": "/" and "scope": "/". That alone eliminates every relative-resolution problem. If only part of the site is the PWA, state the range explicitly as "scope": "/app/" and confirm that start_url lies inside it. Adding a query to start_url lets your analytics distinguish launches from the installed app — for example "/?source=pwa". The manifest itself can live anywhere, but the href of <link rel="manifest"> must match the real path — if the manifest returns a 404, the browser simply ignores it in silence and shows nothing.
                

                                

                    The icon gets cropped on Android (maskable)
                    Android launchers mask icons into a circle or a rounded square. So supplying only "purpose": "any" icons gets the corners cut off — if your logo fills the square frame, the characters at the edges disappear. The declaration that avoids this is "purpose": "maskable", and a maskable icon is designed with roughly the central 40 percent as a safe zone, on the assumption that everything outside it may be clipped. But supplying only a maskable icon is equally wrong — in environments that do not mask, such as a desktop taskbar or a splash screen, it renders as a small logo surrounded by a lot of padding. Either one on its own breaks somewhere: that is the essence of the specification.
                    Register both kinds as separate entries. Even at the same 512 by 512, list the edge-to-edge version as "purpose": "any" and a padded version as "purpose": "maskable" — you can also write "any maskable" on a single entry, but then the artwork has to satisfy both requirements at once. Check the result in Chrome DevTools under Application > Manifest — it shows a preview with the mask applied, so you can see the clipping immediately. Provide at least the 192 and 512 sizes, and use PNG rather than SVG — SVG support varies between environments.
                

                            
        

    

    
        
The manifest is cached. Changing it does not immediately reach devices where the app is already installed — that is usually why a replaced icon or name still shows the old one. When it refreshes is up to the browser, so during development, prompt an update from DevTools under Application > Manifest and confirm with an uninstall and reinstall. And serve manifest.json as Content-Type: application/manifest+json — some browsers will not load it if the server returns text/plain. One design note: display: "standalone" removes the browser UI, and with it the back button and the URL bar — without a way back inside your app, users reach a dead end. A link to an external site is outside scope and opens the browser, but there is no guarantee they can get back. Finally, making something a PWA does not make it get installed — what matters is whether you present a path to installation and a benefit that justifies it: offline use, notifications, fast launch.

    









    
📖 How to Use

    
    
                
  1. 
            1
            
    
                
    Fill in basic info
    
                
    Enter name, short_name, start_url, display, theme_color and so on.
    
            
    
        
    2. 
                
  2. 
            2
            
    
                
    Configure icons and shortcuts
    
                
    Check the icon sizes you ship, then set the common prefix and extension. Add up to four app shortcuts if needed.
    
            
    
        
    3. 
                
  3. 
            3
            
    
                
    Generate and deploy
    
                
    Click Generate JSON, save manifest.json, and paste the HTML snippet into your &lt;head&gt; — the browser will pick up the PWA.
    
            
    
        
    4. 
            






    
❓ Frequently Asked Questions

    

                

            
                What are the minimum requirements to be installable?
                
            
            
You need name (or short_name), start_url, display set to standalone (or fullscreen / minimal-ui), at least 192x192 and 512x512 icons, HTTPS, and a registered service worker. This tool covers everything except the service worker.

        

                

            
                Do I need a maskable icon?
                
            
            
Strongly recommended for Android adaptive icons. Enabling the checkbox adds one 512x512 entry with purpose set to maskable. Keep important content within the inner 80%.

        

                

            
                My manifest changes are not picked up
                
            
            
Browsers cache manifest.json aggressively. Use a short Cache-Control, query-string the reference (?v=...), or hit Update on reload in the Application tab.

        

            






    

        
🔗 Related Tools

        
    






    

        
            🐛 Found a bug or issue with this tool?
            
        

        

            Free to use, no signup. Even just the steps to reproduce are helpful. Reports go directly to the operator and help us fix issues.
        


        

                        

            

                
                
            


            

                
                
                

                    * Browser info (UA / screen / language / URL) is sent automatically to help reproduce the issue