<zhead>
HTML tag collections

Icons & Colors

Icons and interface colours for browser tabs, saved sites, and installed web apps.

A favicon covers the browser tab. Add touch icons, a manifest, or vendor fields only for the platforms your site supports.

Get started

<link rel="icon" href="/icon.svg" sizes="any" type="image/svg+xml">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="apple-touch-startup-image" href="/launch-portrait.png" media="(orientation: portrait)">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5b21b6">
<meta name="theme-color" content="#0d6efd">
<meta name="color-scheme" content="light dark">
<meta name="msapplication-TileColor" content="#0078D7">
<meta name="msapplication-TileImage" content="/path/to/square-image-144x144.png">
useHead({
  link: [
    {
      rel: 'icon',
      href: '/icon.svg',
      sizes: 'any',
      type: 'image/svg+xml'
    },
    {
      rel: 'apple-touch-icon',
      sizes: '180x180',
      href: '/apple-touch-icon.png'
    },
    {
      rel: 'apple-touch-startup-image',
      href: '/launch-portrait.png',
      media: '(orientation: portrait)'
    },
    {
      rel: 'mask-icon',
      href: '/safari-pinned-tab.svg',
      color: '#5b21b6'
    }
  ],
  meta: [
    {
      name: 'theme-color',
      content: '#0d6efd'
    },
    {
      name: 'color-scheme',
      content: 'light dark'
    },
    {
      name: 'msapplication-TileColor',
      content: '#0078D7'
    },
    {
      name: 'msapplication-TileImage',
      content: '/path/to/square-image-144x144.png'
    }
  ]
})

Recommendations

  • 01
    A favicon may be enough
    Browsers still request /favicon.ico by convention. Use link rel="icon" when you want another path or format.
  • 02
    Use SVG where the platform accepts it
    SVG scales cleanly for modern browser favicons. Apple touch icons still need a raster image.
  • 03
    Keep a raster fallback
    PNG remains useful for fixed-size icons and platforms that do not accept SVG.
  • 04
    Test icons against real surfaces
    Check light and dark browser chrome, pinned tiles, and home screens. A transparent mark can disappear on an unexpected background.

Explanation

icon

rel

Provides an icon that browsers can use for the page in tabs, bookmarks, history, and other interface surfaces.

<link rel="icon" href="/icon.svg" sizes="any" type="image/svg+xml">
Declares a scalable SVG icon with its MIME type.

apple-touch-icon

rel

Provides an icon that Apple devices can use when someone saves the site to their Home Screen or installs it as a web app.

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
Provides a 180 by 180 pixel icon and declares its actual size.

apple-touch-startup-image

rel

An Apple extension that supplies a launch image for a web app opened from the Home Screen.

<link rel="apple-touch-startup-image" href="/launch-portrait.png" media="(orientation: portrait)">
Limits this launch image to portrait orientation. Production sites usually need more specific size queries.

mask-icon

rel

A Safari-specific relation for the monochrome SVG used by pinned tabs. It is registered by IANA but is not a built-in HTML Living Standard link type.

<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5b21b6">
Links Safari to an SVG mask and supplies its display color.

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.

color-scheme

name

Tells the browser which color schemes the page can render. The browser can use this early, before the stylesheet loads, to choose a suitable canvas and native controls.

<meta name="color-scheme" content="light dark">
Declares support for both common schemes, with light listed first as the fallback preference.

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.

More collections

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

Essentials

SEO Starter

Social Preview

PWA

Article