Advanced Head Tags: theme-color, Web App Manifest, base and http-equiv

Advanced head tags like theme-color, the web app manifest, color-scheme and referrer meta control how your site looks on phones and when installed. Learn which to use and which (base, refresh) to avoid.

theme-color and color-scheme: matching the browser to your design

The theme-color meta tag suggests a colour for the browser's toolbar and the area around your page, mainly on phones and in installed web apps. It makes your site feel like part of the device.

You can give one colour for light mode and one for dark mode with the media attribute. It uses the same prefers-color-scheme media query you will use in CSS.

The color-scheme meta tag tells the browser which colour schemes your page supports. With light dark, the browser draws its own parts, like the default page background, form fields, checkboxes and scrollbars, in dark colours when the user has dark mode on. Without it, you may get a white text box on your dark page.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Trail Notes - Hiking Journal</title>

  <meta name="color-scheme" content="light dark">
  <meta name="theme-color" content="#2e7d32" media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="#0f1f10" media="(prefers-color-scheme: dark)">
  <meta name="referrer" content="strict-origin-when-cross-origin">

  <link rel="icon" href="/favicon.ico" sizes="32x32">
  <link rel="icon" href="/icons/icon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">
  <link rel="manifest" href="/manifest.webmanifest">
</head>
<body>
  <h1>Trail Notes</h1>
  <label for="note">Today's hike</label>
  <input id="note" type="text">
</body>
</html>

On a phone in light mode, the browser bar turns forest green; in dark mode it becomes almost black. If the user has dark mode on, the text field and page background also turn dark, because of color-scheme. The referrer tag is explained further down.

Note: Support for theme-color differs. Safari and Chrome on Android use it, desktop browsers mostly use it only for installed apps. It is a nice extra, never something your design depends on.

How to add a web app manifest

A web app manifest is a small JSON file that describes your site as an app: its name, icons and colours. With it, people can install your site to their home screen or desktop, and it opens in its own window like a real app. A site like this is often called a PWA (progressive web app). Installing usually also needs HTTPS, and a full offline app needs JavaScript called a service worker, which is beyond this course.

Save this as manifest.webmanifest (the name manifest.json also works) in your site's root folder:

{
  "name": "Trail Notes - Hiking Journal",
  "short_name": "Trail Notes",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#2e7d32",
  "icons": [
    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" },
    { "src": "/icons/icon-maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ]
}

Then link to it from the head of every page with <link rel="manifest" href="/manifest.webmanifest">, as in the first example. name is shown when installing; short_name appears under the home screen icon. display: "standalone" hides the browser address bar. background_color is the splash screen colour while the app starts. A maskable icon has extra empty space around the logo, so phones can cut it into a circle or rounded square without cutting off your logo.

Favicon and apple-touch-icon sizes

You saw the basic favicon links in the head lesson. Here is a simple, modern set that covers almost every device:

File	Size	Used for
favicon.ico	32 × 32	Older browsers and tools that look in the root folder
icon.svg	Any (vector)	Modern browser tabs; sharp at every size
apple-touch-icon.png	180 × 180	iPhone and iPad home screen
icon-192.png and icon-512.png	192 and 512	Android home screen and install screens, listed in the manifest

Tip: Give the apple-touch-icon a solid background colour, not a transparent one. iOS fills transparent areas with black, which can make your logo hard to see.

The base element: use it with care

<base href="..."> changes the starting point for every relative URL on the page. With <base href="https://example.com/docs/">, the link href="intro.html" goes to https://example.com/docs/intro.html. <base target="_blank"> would open every link in a new tab.

It sounds handy, but it causes surprising bugs:

• In-page links like href="#pricing" now point to https://example.com/docs/#pricing, which may load a different page instead of scrolling.
• Every image, stylesheet and script path changes too, so moving a page can break all of them.
• You can only have one <base>, and it must come before any other element that uses a URL.

Most sites never need it. Use clear relative or root-relative paths instead.

http-equiv refresh and the referrer meta tag

http-equiv meta tags act like instructions that a server would normally send. The one you will see in old code is a refresh:

<!-- Avoid: reloads or redirects the page after 5 seconds -->
<meta http-equiv="refresh" content="5; url=https://example.com/new-page">

This sends visitors to another page after 5 seconds. Avoid it. A page that changes by itself can confuse people who read slowly or use screen readers, it breaks the back button, and it fails accessibility guidelines (WCAG). To move a page, ask your host for a 301 redirect, which happens instantly on the server and tells search engines the page has moved for good. Netlify, for example, uses a simple _redirects file.

The referrer meta tag controls how much of your page address is sent to other sites when someone clicks a link. Modern browsers already use strict-origin-when-cross-origin by default: other sites see only your domain, not the full path. Use content="no-referrer" if your URLs might contain private information, like a reset token.

Practice exercise

Add a complete set of "app" head tags to a page for a recipe website: color-scheme, two theme-color tags for light and dark mode, an SVG favicon, an apple-touch-icon and a manifest link. Then write the manifest.webmanifest file with a name, short name, start URL, display mode, colours and two icons.

Hint: open DevTools, go to the Application tab and click Manifest. Chrome and Edge show your manifest there and warn you about missing icons.

Key takeaways

• theme-color colours the browser bar; use media for separate light and dark colours.
• color-scheme lets built-in controls and backgrounds follow dark mode.
• A web app manifest, linked with rel="manifest", makes your site installable.
• Provide a 180 × 180 apple-touch-icon and 192 and 512 icons in the manifest.
• Avoid <base> and http-equiv="refresh"; use normal paths and server redirects.