---
title: "PWA HTML Tags · HTML Tag Collections · zhead"
canonical_url: "https://zhead.dev/collection/pwa"
last_updated: "2026-08-10T16:29:02.250Z"
meta:
  description: "Document metadata commonly paired with a web app manifest."
  "og:description": "Document metadata commonly paired with a web app manifest."
  "og:title": "PWA HTML Tags · HTML Tag Collections · zhead"
---

HTML tag collections

# PWA

Document metadata commonly paired with a web app manifest.

The manifest carries most install metadata. The remaining meta tags tune browser chrome or cover older Apple and Microsoft behaviour.

## Get started

```
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<link rel="manifest" href="/app.webmanifest">
<meta name="theme-color" content="#0d6efd">
<meta name="application-name" content="Zhead">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="MyApp">
<meta name="msapplication-TileColor" content="#0078D7">
<meta name="msapplication-TileImage" content="/path/to/square-image-144x144.png">
<meta name="msapplication-config" content="/browserconfig.xml">
```

## Explanation

### [viewport](https://zhead.dev/meta/viewport)

name

Controls the layout viewport on mobile browsers, including its width, initial zoom, and how content uses display cutout areas.

```
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
```

Lets content extend into the full display area. Use safe-area inset values in CSS to protect important content.

### [manifest](https://zhead.dev/link/manifest)

rel

Links the page to a web app manifest, a JSON document that describes properties such as the app name, icons, display mode, scope, and start URL.

```
<link rel="manifest" href="/app.webmanifest">
```

Links to a same-origin web app manifest. A relative URL is valid here.

### [theme-color](https://zhead.dev/meta/theme-color)

name

Suggests a color that browsers may use around the page, such as a title bar, tab highlight, or task switcher card.

```
<meta name="theme-color" content="#0d6efd">
```

A valid CSS hex color that browsers can use around the page.

### [application-name](https://zhead.dev/meta/application-name)

name

Gives browsers a short name for the web application represented by the page. A browser may use it instead of the page title in bookmarks or other interface labels.

```
<meta name="application-name" content="Zhead">
```

A short application name that stays useful when the page title changes.

### [apple-mobile-web-app-capable](https://zhead.dev/meta/apple-mobile-web-app-capable)

name

Legacy Apple extension that makes a Home Screen web app open without Safari controls when set to yes. Prefer a web app manifest for a modern PWA.

```
<meta name="apple-mobile-web-app-capable" content="yes">
```

The only value that enables this legacy standalone mode.

### [apple-mobile-web-app-status-bar-style](https://zhead.dev/meta/apple-mobile-web-app-status-bar-style)

name

Legacy Apple extension that sets the iOS status bar style for a Home Screen web app. It only works when apple-mobile-web-app-capable enables standalone mode.

```
<meta name="apple-mobile-web-app-status-bar-style" content="default">
```

Uses the normal status bar. This is also the default value.

### [apple-mobile-web-app-title](https://zhead.dev/meta/apple-mobile-web-app-title)

name

Legacy Apple extension that sets the title shown for a Home Screen web app. Without it, iOS uses the page title.

```
<meta name="apple-mobile-web-app-title" content="MyApp">
```

A short Home Screen title.

### [msapplication-TileColor](https://zhead.dev/meta/msapplication-tilecolor)

name

Legacy Internet Explorer metadata for the background color of a website tile pinned to the Windows 8 Start screen. Modern Chromium-based Edge does not use it.

```
<meta name="msapplication-TileColor" content="#0078D7">
```

A valid hexadecimal tile color.

### [msapplication-TileImage](https://zhead.dev/meta/msapplication-tileimage)

name

Legacy Internet Explorer metadata for the image on a website tile pinned to the Windows 8 Start screen. Modern Chromium-based Edge does not use it.

```
<meta name="msapplication-TileImage" content="/path/to/square-image-144x144.png">
```

A root-relative path to the legacy 144 × 144 tile image.

### [msapplication-config](https://zhead.dev/meta/msapplication-config)

name

Legacy Internet Explorer metadata that points to browserconfig.xml for Windows pinned-site tiles. Modern Chromium-based Edge does not use it.

```
<meta name="msapplication-config" content="/browserconfig.xml">
```

Points to the configuration file at the site root.

## More collections

Start with the closest collection, then trim it to match your page.

[<h3>Essentials</h3>

](https://zhead.dev/collection/essential) [<h3>SEO Starter</h3>](https://zhead.dev/collection/seo) [<h3>Social Preview</h3>](https://zhead.dev/collection/social-share) [<h3>Icons & Colors</h3>](https://zhead.dev/collection/icons) [<h3>Article</h3>

](https://zhead.dev/collection/article)