Web App Manifest Generator

Create the manifest.webmanifest file that lets browsers install your site as an app. Fill in the name, colors, display mode, and icons, and get the HTML tags to link it.

Updated
Runs in your browser. Your data is not uploaded.

Shown under the icon. About 12 characters fit.

Icon sizes you have (PNG)
manifest.webmanifest
HTML head tags 

        

    

    


    

    

                                                
        

                    

            
How to use the Web App Manifest Generator

        
  1. Fill in App name, Short name, and Start URL, then pick the Display mode and the Theme color and Background color.
  2. Set the Icon folder and tick the icon sizes you have made. Include a maskable icon for Android.
  3. Download manifest.webmanifest, upload it to your site, and paste the HTML head tags into every page.



                    

            
How it works

        
A web app manifest is a JSON file described by the W3C Web Application Manifest specification. Browsers read it to decide how an installed site looks and starts.
  • name appears on the install prompt and splash screen, and short_name under the home screen icon, where space is tight (about 12 characters).
  • display sets how much browser interface shows: standalone looks like a native app, minimal-ui keeps back and reload buttons, fullscreen hides everything.
  • theme_color tints the title bar, and background_color fills the splash screen while the app loads.
  • Chrome needs a name or short_name, a start_url, a display other than browser, and icons of at least 192 and 512 pixels before it offers to install the site.



                    

            
Examples

        
{
  "name": "Utilza Tools",
  "short_name": "Utilza",
  "start_url": "/",
  "scope": "/",
  "display": "standalone",
  "theme_color": "#1f5fbf",
  "background_color": "#ffffff",
  "icons": [
    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" },
    { "src": "/icons/maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ]
}
Linked from the page head with:
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#1f5fbf">
<link rel="apple-touch-icon" href="/icons/icon-192.png">



                    

            
Limitations

        
  • The tool writes the manifest, not the icons. Export the PNG files at the listed sizes from your design tool.
  • A manifest alone doesn't make an app work offline. That needs a service worker.
  • Safari on iOS reads only part of the manifest and uses the apple-touch-icon link for the home screen icon.



            

        

        
Frequently asked questions

        

                            

                    Should the file be manifest.json or manifest.webmanifest?

                    
Both work. The specification suggests the .webmanifest extension, served with the MIME type application/manifest+json.

                

                            

                    What is a maskable icon?

                    
An icon with extra padding around the logo, so Android can crop it into a circle, a squircle, or another shape without cutting off the logo. Keep the important part inside the central 80%.

                

                            

                    Why is my site not installable?

                    
Check that it is served over HTTPS, that the manifest has a name, a start URL, a display mode other than browser, and 192 and 512 pixel icons, and that the icon files load. Chrome DevTools lists the problems under Application → Manifest.

                

                            

                    Is anything I enter uploaded?

                    
No. The manifest is built in your browser.

                

                    

    

        

        

            
            
Often used together with the Web App Manifest Generator.

        

        
    
                            
  • 
    

    
    Color Converter
    
    
            
    Converts colors between HEX, RGB, HSL, HSV, and CMYK and checks WCAG contrast.
    
    
    

    • 
                            
  • 
    

    
    Robots.txt Generator
    
    
            
    Creates robots.txt rules for search and AI crawlers and tests URLs against them.
    
    
    

    • 
                            
  • 
    

    
    JSON Validator
    
    
            
    Checks JSON syntax and explains any error in plain English.
    
    
    

    •