LocalToolsOffline browser tools collection

Category: Developer tools

Web App Manifest Generator

System ideaMissing a tool?

Generate a manifest.webmanifest for installable web apps

Fill in your app's name, start URL, display mode, theme and background colors and icon list, and get a ready-to-use manifest.webmanifest JSON file that makes a site installable as a Progressive Web App. Built locally in your browser.

manifest.webmanifest
{
  "name": "LocalTools",
  "short_name": "LocalTools",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#1f6f4a",
  "background_color": "#faf8f3",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Everything on this page is processed in your browser. Nothing is uploaded.

What this tool does

A web app manifest is the JSON file that tells a browser how your site should behave when installed: its name and icon on a home screen, the color of the status bar, whether it opens in a standalone window or a normal browser tab, and where it starts. Without one, "Add to Home Screen" either isn't offered or falls back to a plain bookmark instead of an app-like experience.

How to use it

  1. Enter your app's name, short name and start URL.
  2. Choose a display mode, theme color and background color.
  3. List your icons, one per line, as a path and size such as "/icon-192.png 192x192".
  4. Copy the JSON into a manifest.webmanifest file and link it from your page's <head> with <link rel="manifest" href="/manifest.webmanifest">.

Privacy

This tool runs entirely in your browser. Your input is never uploaded, stored or shared — closing the tab removes it.

Frequently asked questions

What sizes of icons do I need?
At minimum a 192x192 and a 512x512 PNG cover most installation prompts and app icon uses; add more sizes if you want sharper icons on specific platforms.
What's the difference between theme_color and background_color?
theme_color tints the browser UI (like the address bar or status bar) around your app; background_color is shown briefly as a splash screen background while the app loads, before its own content paints.
Do I still need this if I'm not building a PWA?
A manifest also improves how a site's icon and name appear when a visitor bookmarks it or adds it to their home screen, even without full offline/service-worker support.

Back to all tools