PWA Manifest and Meta Tags for Installability

The plain-language idea

A website becomes an installable, icon-on-the-home-screen app not through an app store submission, but through a handful of HTML tags and one JSON file — the web app manifest. Getting a user to install your site is a real, free, app-store-independent retention channel: an installed PWA gets a home-screen icon, opens without browser chrome, and can become a standing habit the way a bookmark never does. This is squarely a marketing/growth lever, not just a technical curiosity.

Three pieces do the actual work:

• <link rel="manifest" href="/manifest.webmanifest"> points the browser at a JSON file describing the app's name, icons, start URL, and display mode.
• <meta name="theme-color" content="#..."> colors the browser UI (status bar, task switcher) to match your brand, both installed and in a normal tab.
• <link rel="apple-touch-icon" href="..."> is Apple-specific and layered on top of the manifest, because Safari on iOS still doesn't fully implement the Web App Manifest spec — without it, an iOS user who adds your site to their home screen gets a screenshot thumbnail instead of your icon.

See it in a real thing: the head tags plus the manifest they point to

<head>
  <link rel="manifest" href="/manifest.webmanifest" />
  <meta name="theme-color" content="#0f172a" />
  <link rel="apple-touch-icon" href="/icons/apple-touch-icon-180.png" />
</head>

// manifest.webmanifest
{
  "name": "Praxis — Frontend Interview Prep",
  "short_name": "Praxis",
  "start_url": "/learn",
  "display": "standalone",
  "background_color": "#0f172a",
  "theme_color": "#0f172a",
  "icons": [
    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

display: "standalone" is what strips the browser's URL bar and back/forward buttons once installed — the app-like presentation the manifest exists to enable.

Watch out

• iOS doesn't read the manifest for its icon — apple-touch-icon is a separate, older, Apple-only tag that predates the Web App Manifest spec, and Safari still leans on it instead of the manifest's icons array.
• theme-color isn't cosmetic-only — it's what makes the installed app's title bar/status bar look like a native app's chrome instead of a browser wrapped around a webpage, part of what makes "installed" feel meaningfully different from "bookmarked" to a user.
• The Android install prompt needs a service worker, HTTPS, and the manifest — all three, not just the manifest tag. A missing service worker is the most common reason a site "should" be installable and isn't.
• This is a real marketing channel, not just a technical checkbox — an installed PWA icon on a home screen is a standing, free re-engagement surface, competing directly with the push notifications and app-store presence that native apps pay for.
• iOS has no automatic prompt at all, unlike Android/Chrome — every iOS install is a manual user action through Safari's Share sheet, so any "install our app" UI you build has to explain that flow rather than trigger a native browser prompt.

Why this matters in interviews

A frontend interviewer probing PWA knowledge is usually checking whether you understand that "installable" is a checklist of independent requirements (manifest + service worker + HTTPS) rather than one flag to flip, and that iOS and Android genuinely diverge here — a candidate who can explain why apple-touch-icon exists alongside a spec-compliant manifest, rather than assuming one subsumes the other, is demonstrating they've actually shipped this, not just read about it.