# Web app manifest is present
- **Pattern:** `ab-002189` (`pre-launch.final-verification.web-manifest`)
- **Severity:** info
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-002189
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-002189)
## Why it matters
Without a web app manifest, Chrome and Edge suppress the install prompt, iOS Add-to-Home-Screen falls back to a screenshot icon, and Lighthouse flags the site on its PWA audit. Android users who do install the site get a low-resolution thumbnail in the launcher with the document title instead of your short_name, and the splash screen renders as a blank white page instead of branded `background_color` and `theme_color`.
## Severity rationale
Info because the feature gap affects only installed-app users, not core browser functionality.
## Remediation
In Next.js App Router, create `app/manifest.ts` exporting a `MetadataRoute.Manifest` object with `name`, `short_name`, `start_url`, `display: 'standalone'`, `background_color`, `theme_color`, and at least two icon sizes (192x192 and 512x512). Next wires the `` automatically. For other frameworks, drop `manifest.json` in `public/` and link it from the document head.
```ts
// app/manifest.ts
import type { MetadataRoute } from 'next'
export default function manifest(): MetadataRoute.Manifest {
return { name: 'Your App', short_name: 'App', start_url: '/', display: 'standalone', background_color: '#ffffff', theme_color: '#000000', icons: [{ src: '/icon-192.png', sizes: '192x192', type: 'image/png' }, { src: '/icon-512.png', sizes: '512x512', type: 'image/png' }] }
}
```
## Detection
- **ID:** `web-manifest`
- **Severity:** `info`
- **What to look for:** Count all web manifest files and references. Enumerate which required fields are present (name, short_name, icons, start_url, display). Check `public/` directory for `manifest.json` or `manifest.webmanifest`. Check `app/` directory for `manifest.ts` or `manifest.js` (Next.js App Router convention). Check `` in layout for `` tag. The manifest should include at minimum: `name`, `short_name`, `icons`, and `display`.
- **Pass criteria:** A web app manifest exists and is linked in the document head, with at minimum `name`, `short_name`, and a set of icons defined. At least 4 of 5 required manifest fields (name, short_name, icons, start_url, display) must be present.
- **Fail criteria:** No web app manifest found.
- **Skip (N/A) when:** Skip for API-only projects and internal tools with no public-facing pages. Signal: project type is `api` or `cli`, or no HTML pages exist.
- **Cross-reference:** For favicon and icons, see `favicon`. For apple touch icon, see `apple-touch-icon`.
- **Detail on fail:** `"No web app manifest found — users cannot install the site as a PWA and OS integration features are unavailable"`
- **Remediation:** A web app manifest enables Progressive Web App features and improves the install experience:
```json
// public/manifest.json or app/manifest.ts
{ "name": "Your App", "short_name": "App", "icons": [{ "src": "/icon-192.png", "sizes": "192x192" }], "start_url": "/", "display": "standalone" }
```
```ts
// app/manifest.ts (Next.js App Router)
import type { MetadataRoute } from 'next'
export default function manifest(): MetadataRoute.Manifest {
return {
name: 'Your App Name',
short_name: 'AppName',
description: 'What your app does',
start_url: '/',
display: 'standalone',
background_color: '#ffffff',
theme_color: '#000000',
icons: [
{ src: '/icon-192.png', sizes: '192x192', type: 'image/png' },
{ src: '/icon-512.png', sizes: '512x512', type: 'image/png' },
],
}
}
```
Even if you're not building a full PWA, a manifest improves the mobile "Add to Home Screen" experience and is expected by modern browser quality checks.
Taxons: user-experience
HTML version: https://auditbuffet.com/patterns/ab-002189