<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">
useHead({
  meta: [
    {
      name: 'viewport',
      content: 'width=device-width, initial-scale=1, viewport-fit=cover'
    },
    {
      name: 'theme-color',
      content: '#0d6efd'
    },
    {
      name: 'application-name',
      content: 'Zhead'
    },
    {
      name: 'apple-mobile-web-app-capable',
      content: 'yes'
    },
    {
      name: 'apple-mobile-web-app-status-bar-style',
      content: 'default'
    },
    {
      name: 'apple-mobile-web-app-title',
      content: 'MyApp'
    },
    {
      name: 'msapplication-TileColor',
      content: '#0078D7'
    },
    {
      name: 'msapplication-TileImage',
      content: '/path/to/square-image-144x144.png'
    },
    {
      name: 'msapplication-config',
      content: '/browserconfig.xml'
    }
  ],
  link: [
    {
      rel: 'manifest',
      href: '/app.webmanifest'
    }
  ]
})

Explanation

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

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

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

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

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

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

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

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

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

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.

Essentials

SEO Starter

Social Preview

Icons & Colors

Article