The tags a website needs before it is an app
Converting a website to an app does not change the HTML, so anything the site gets wrong on a phone it gets wrong in the app — full-screen, with no browser chrome to hide behind. Most of those problems are fixed by a dozen lines in the <head> that the site should have had anyway. This generator writes them.
| Tag | What it fixes |
|---|---|
viewport | Without it, a phone renders the page at 980px wide and shrinks it. The app looks like a desktop site seen through a keyhole. |
theme-color | Chrome tints its address bar with it; inside the app it is the colour the builder reads as a default. The dark-scheme variant is used in dark mode. |
color-scheme | Tells the browser the page supports dark mode, so form controls and scrollbars match instead of glowing white. |
format-detection | Stops iOS Safari turning any string that looks like a phone number into a blue link. Use real tel: links instead. |
apple-touch-icon | The icon iOS uses for "Add to Home Screen" — and the image many link previews fall back to. |
manifest | Links the web app manifest, which makes the site installable as a PWA and names it for Android's "install" prompt. |
mobile-web-app-capable | The standard successor to Apple's tag: the page can run full-screen when installed. |
The viewport line, in detail
width=device-width, initial-scale=1 is the minimum and is never wrong. The optional parts trade something off. user-scalable=no makes the page feel like an app — no accidental zoom on a double-tap — but removes a visitor's ability to enlarge small text, which is why accessibility guidelines discourage it; many apps do it anyway. viewport-fit=cover lets the page extend behind a notch and, on Android 15, behind the now-transparent status bar; pair it with padding-top: env(safe-area-inset-top) on any fixed header.
Theme colour and the app
The colour you put in theme-color is worth choosing carefully because it is the one you will give the builder as the app's theme — the status bar, the splash background, the system chrome. The Theme Colour Lab previews it on a phone and tells you whether the status bar icons should be light or dark.
What these tags do not do
They do not make a site responsive — that is the CSS's job — and they do not make it work offline. They make a responsive site render at the right size, in the right colours, with the right icon, in every mobile browser and every WebView. The App Readiness Score covers the rest of the list.