ES
Home › Developer Tools › Web App Manifest Generator

Web App Manifest Generator

Fill in your app details, upload one square image, and get a valid web app manifest plus every icon size a Progressive Web App needs, including maskable and Apple touch icons. Preview the home screen icon and splash screen, then download everything as a ZIP.

Last updated:

App details
categories (optional)
Icons
Source icon
Choose icon imageSquare PNG or SVG, 512 px or larger
Awesome
Mail
Maps
Home screen (maskable)
My Awesome App
Splash screen

      

        
        
        
      

      
    
    
    
  
    
  
    
  Advertisement
  
    


  
    

    

    




    
  Advertisement
  

    



    How to use the Web App Manifest Generator
    

    1. Enter your app details: name, short name, description, start URL and display mode.
    2. Pick the theme and background colors used for the toolbar and the splash screen.
    3. Upload a square image (512×512 px or larger, PNG or SVG works best). Without one, a letter icon is generated.
    4. Adjust the maskable padding until the logo sits inside the circle in the preview.
    5. Download the ZIP, upload its files to your site and paste the HTML tags into your page's head.
    

    Example manifest explained
    

    

    MemberWhat it does
    


    name / short_nameFull name for install dialogs and splash screens; short name (about 12 characters) under the home screen icon.
    

    start_urlThe page opened when the app is launched. Add a query such as /?source=pwa to measure app launches.
    

    scopeThe URLs that belong to the app. Pages outside it open with browser controls.
    

    idA stable identity; keeps the installed app the same even if start_url changes later.
    

    displaystandalone, fullscreen, minimal-ui or browser.
    

    theme_colorToolbar and task switcher color. Match it with the <meta name="theme-color"> tag.
    

    background_colorSplash screen color shown while the app loads; usually your page background.
    

    iconsPNG icons with sizes and type; "purpose": "maskable" marks icons safe to crop.
    
    

    


    Installing the files on your site
    

      

    1. Unzip the download and upload the manifest file and the icon folder to the root of your site (so the icon paths match the folder you entered).
      2. 

    2. Paste the tags from head-tags.html into the <head> of every page.
      3. 

    3. Serve the manifest with the application/manifest+json MIME type if your server lets you set it.
      4. 

    4. Open your site in Chrome, then DevTools → Application → Manifest to check for errors and see the installability status.
      5. 

    

    Starting a new site? The HTML Boilerplate Generator creates a starter page with the manifest link already in place, and the Favicon Generator makes the browser tab icons.
    


    Frequently asked questions
    

    What is a web app manifest?
    It is a JSON file, linked with <link rel="manifest">, that tells the browser how your site should behave when installed as an app: its name, icons, colors, start URL and whether it opens in a standalone window without browser UI.
    

    Which icon sizes does a PWA need?
    At minimum a 192×192 and a 512×512 PNG; Chrome uses them for the home screen icon and splash screen. Adding 48 to 384 px sizes lets devices pick a sharper match, and a 180×180 apple-touch-icon is needed for iOS home screens, which do not use manifest icons in older versions.
    

    What is a maskable icon?
    Android crops app icons into circles, squircles or rounded squares. A maskable icon has its logo inside a central safe zone (a circle with 40% radius, i.e. 80% of the width) and a solid background filling the whole square, so it looks right with any mask. Declare it with "purpose": "maskable".
    

    Should I name it manifest.json or manifest.webmanifest?
    Both work. The specification suggests the .webmanifest extension with the application/manifest+json MIME type, but browsers accept manifest.json too. Just make sure the link tag points to the file you upload.
    

    What is the difference between start_url, scope and id?
    start_url is the page that opens when the app is launched. scope limits which URLs are part of the app; navigating outside it shows browser UI. id is a stable identity for the app; if omitted it is derived from start_url, so set it if your start URL may change.
    

    Which display mode should I choose?
    standalone is the usual choice: the app opens in its own window without the address bar. fullscreen hides the status bar too (good for games), minimal-ui keeps minimal navigation controls, and browser opens a normal tab.
    

    Is a manifest enough to make my site installable?
    Browsers also require the site to be served over HTTPS. Chrome and Edge may additionally look for a service worker to offer an install prompt with full offline support; the manifest provides the name, icons and launch behaviour.
    

    Are all the tools on FreeToolCabin tested for quality and accuracy?
    Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.
    


    Related tools
    

    
Favicon GeneratorMake a favicon.ico, PNG icons, apple-touch-icon and web manifest from an image, text or emoji.HTML Boilerplate GeneratorTick the options you need and get a clean HTML5 starter template with meta, OG tags and CSS reset.Meta Tag GeneratorCreate SEO, Open Graph and X meta tags with live previews.PNG to ICOCreate multi-size favicon .ico files from PNG.Open Graph PreviewPaste OG tags and preview how links look on Facebook, X and LinkedIn.YouTube Embed Code GeneratorCreate responsive YouTube embed code with start time, autoplay, loop and privacy mode.CSS Box Shadow GeneratorDesign layered CSS box shadows with a live preview, presets and one-click Copy CSS.CSS Border Radius GeneratorRound each corner, draw elliptical 8-value radii or random blob shapes and copy the CSS.CSS Button GeneratorDesign CSS buttons with gradients, borders, shadows and hover and active states, then copy the code.CSS Flexbox GeneratorBuild flexbox layouts visually: set container and item properties, then copy the CSS and HTML.Twitter Card GeneratorCreate X / Twitter Card meta tags with Open Graph fallbacks, character counters and a live preview.CSS Grid GeneratorDraw CSS grid layouts: set tracks and gaps, drag to name areas, then copy the CSS and HTML.PX to REM ConverterConvert px to rem or em and back, with a 1-100px table and a whole-CSS converter.Glassmorphism CSS GeneratorDesign frosted-glass UI cards with blur, transparency and border sliders, then copy the CSS.CSS Text Shadow GeneratorLayer CSS text shadows with a live preview and neon, 3D, outline and retro presets.HTML Editor (Live Preview)Write HTML, CSS and JavaScript and see a live, sandboxed preview as you type.HTML to JSX ConverterConvert HTML to valid React JSX: className, htmlFor, style objects, self-closing tags and events.CSS Clip-Path GeneratorDraw CSS clip-path shapes by dragging points: polygons, circle, ellipse and inset. Copy the CSS.CSS Animation GeneratorCreate CSS keyframe animations from 23 presets with live preview, timing controls and Copy CSS.CSS Triangle GeneratorMake CSS triangles in 8 directions with the border trick or clip-path. Set size and color, copy CSS.CSS Loader GeneratorPick from 14 pure CSS spinners and loaders, set color, size and speed, then copy the HTML and CSS.Cubic Bezier GeneratorDrag the control points to design a CSS easing curve, compare it with linear and copy cubic-bezier().CSS Filter GeneratorAdjust blur, brightness, contrast, hue, sepia and drop-shadow on an image and copy the CSS filter.CSS Specificity CalculatorCalculate CSS selector specificity (a, b, c), including :is(), :not(), :has() and :where(), and compare.Google Maps Embed GeneratorTurn an address or coordinates into responsive Google Maps iframe embed code, no API key.Neumorphism CSS GeneratorDesign soft UI neumorphic shapes with live preview and copy the box-shadow CSS.SVG Wave GeneratorMake layered SVG waves for section dividers and export SVG, PNG or a CSS background.SVG Blob GeneratorGenerate random organic SVG blob shapes with gradients and export SVG, PNG or CSS clip-path.CSS Clamp GeneratorTurn min/max sizes and viewport widths into a fluid CSS clamp() value in rem and vw.CSS @font-face GeneratorTurn font files or URLs into ready-to-paste @font-face rules with weights, styles and a preview.CSS Media Query GeneratorBuild @media rules for widths, orientation, dark mode and hover, or get framework breakpoints.CSS Scrollbar GeneratorStyle scrollbars: width, colors, radius and hover, with ::-webkit-scrollbar and scrollbar-color CSS.CSS Sprite GeneratorPack many icons into one sprite sheet PNG and get CSS classes with background-position.CSS Text Gradient GeneratorMake gradient text with background-clip:text: color stops, angle, font preview and fallback CSS.CSS Toggle Switch GeneratorDesign pure-CSS toggle switches: size, colors, shape and animation. Copy accessible HTML + CSS.CSS Tooltip GeneratorBuild pure CSS tooltips: position, arrow, colors, padding and animation. Copy HTML and CSS.HTML Form BuilderDrag and drop form fields with labels and validation, then copy accessible HTML and CSS code.Iframe GeneratorCreate iframe embed code: size or responsive ratio, border, allow, sandbox, lazy load, live preview.CSS Shape Divider GeneratorCreate wave, tilt, curve and triangle section dividers and copy the SVG, HTML and CSS.CSS Transform GeneratorRotate, scale, skew and translate an element with sliders and copy the CSS transform code.Font Pairing ToolPreview Google Font heading and body pairs on real layouts and copy the embed code and CSS.HTML Accessibility CheckerPaste HTML to find WCAG accessibility problems with impact level, the failing element and a fix.HTML Image Map GeneratorDraw clickable rectangle, circle and polygon hotspots on an image and get image map HTML.SVG ViewerOpen or paste SVG code to preview it live with zoom, backgrounds, size info and PNG export.Pathfinding VisualizerAnimate BFS, DFS, Dijkstra, A* and greedy search on a grid with walls, weights and mazes.PX to VW ConverterConvert pixels to vw and vh for any viewport size, and vw/vh back to px, with breakpoint tables.SVG Path EditorEdit an SVG path d attribute visually: drag points, edit commands, convert, scale and minify.SVG to CSS Data URITurn SVG code into a small URL-encoded data URI for CSS backgrounds, with Base64 size comparison.SVG to JSXTurn SVG code into a clean React component: camelCase attributes, style objects, TypeScript.Tailwind CSS Cheat SheetSearchable Tailwind class to CSS reference with live previews, class decoder and color palette.CSS Background Pattern GeneratorMake pure-CSS stripes, dots, checkerboard, zigzag and grid backgrounds and copy the code.CSS Color Filter GeneratorTurn a HEX color into a CSS filter that recolors black icons and SVGs, with an accuracy score.CSS Gradient Animation GeneratorCreate animated gradient backgrounds: pick colors, angle and speed, preview live and copy the CSS.CSS Hover Effects GeneratorPick button, link and image hover effects, tweak colors and timing, and copy the HTML and CSS.CSS InlinerMove CSS from style blocks into inline style attributes so HTML emails render in every client.

    

    See all 52 Web, HTML & CSS Tools →