How-to Guides Web & HTTP

How to Make a Website Installable (Web App Manifest)

Turn a website into an installable app: serve it over HTTPS, prepare 192 and 512 pixel icons, write a web app manifest, link it from the page and check the installability requirements.

Last reviewed: October 28, 2026

On this page

What you need
Example
Common pitfalls

Steps

Serve the site over HTTPS

Installation requires a secure origin. localhost is allowed while developing.
Prepare the icons

Create square PNG icons at 192 × 192 and 512 × 512 pixels, plus a maskable version with the artwork inside the central safe area so that Android can crop it into a circle or rounded square.
Write the manifest

Fill in the Web App Manifest Generator with the name, short name, start URL, display mode, colours and icon list, and copy the JSON into manifest.webmanifest.
Link it from every page

Add <link rel="manifest"> and a theme-color meta tag to the <head>. The generator prints these tags for you.
Check the requirements

The generator checks for a name, start URL, standalone display and both icon sizes (required), and advises a maskable icon, a short name of at most 12 characters, a theme colour and a description.
Test on real devices

In Chrome DevTools open Application, then Manifest, to see warnings, and try the install prompt on a phone. Also check how the icon and theme colour look on the home screen.

What you need

A site served over HTTPS, a square logo to make icons from and access to the page head.

Example

This manifest passes every installability check in the generator:

{
  "name": "Example App",
  "short_name": "Example",
  "description": "A small example application",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#0d6efd",
  "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"
    }
  ]
}

And the tags that go in the page head:

<link rel="manifest" href="https://example.com/manifest.webmanifest">
<meta name="theme-color" content="#0d6efd">
<link rel="apple-touch-icon" href="https://example.com/icons/icon-192.png">

Common pitfalls

Relative icon paths resolve against the manifest URL, not the page.
The start_url should load without a login redirect, or the installed app opens to a blank screen.
Use display: standalone for an app-like window; browser keeps the normal browser UI and is not installable on its own.
iOS uses apple-touch-icon and its own add-to-home-screen flow, so keep that link too.

Try these tools

Web App Manifest Generator

Generate a web app manifest (manifest.webmanifest) for a Progressive Web App: name, icons, colors, display mode and start URL.

Image to Favicon Generator

Center-crop and resize an uploaded image down to a square favicon PNG at a common icon size, then download it.

Image Resizer

Resize an uploaded image to exact pixel dimensions, with optional aspect-ratio lock, then download the result.

Meta Tag Generator

Generate the title, meta description, canonical, robots, Open Graph and Twitter Card tags for your page.

Frequently Asked Questions

Not in current Chromium browsers: a valid manifest served over HTTPS is enough for the install prompt. A service worker is still needed for offline use and some other features.

Check HTTPS, that the manifest is linked and parses, that it has a name, a start URL, a standalone display mode and 192 and 512 pixel icons, and that the app is not already installed.

Back to the how-to guides

Steps

Serve the site over HTTPS

Prepare the icons

Write the manifest

Link it from every page

Check the requirements

Test on real devices