Favicon HTML, manifest, and SVG templates by site type

Above this section, the tool generates a favicon package from an image, text, or emoji input. Below: the copy-paste templates that go into your repository, grouped by the kind of site you are shipping. Head snippets, a webmanifest shell, and the SVG color-override pattern.

Pick the template that matches the site

The grid covers the four shipping shapes that account for roughly 95% of favicon installs. The fifth row exists because Apple's PWA stack still ignores the webmanifest for splash and home-screen styling, so iOS-leaning teams configure things differently than Android-leaning teams.

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0C0B0A" media="(prefers-color-scheme: dark)">
<meta name="theme-color" content="#F4F1EC" media="(prefers-color-scheme: light)">

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="icon" href="/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/favicon-96x96.png" sizes="96x96" type="image/png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-152x152.png" sizes="152x152">
<link rel="apple-touch-icon" href="/apple-touch-icon-167x167.png" sizes="167x167">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="YourApp">

{
  "name": "Your App",
  "short_name": "App",
  "icons": [
    {
      "src": "/android-chrome-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/android-chrome-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ],
  "theme_color": "#0C0B0A",
  "background_color": "#F4F1EC",
  "display": "standalone",
  "start_url": "/"
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .fg { fill: #0C0B0A; }
    @media (prefers-color-scheme: dark) {
      .fg { fill: #BFFF00; }
    }
  </style>
  <path class="fg" d="...your glyph path..." />
</svg>

Link tag attribute reference

Webmanifest field reference

Vocabulary

Apple touch icon

PNG referenced by Safari for iOS Add-to-Home-Screen, the macOS Sidekick app, and as a fallback in some Chromium-based macOS browsers. Always 180 × 180 px for the default size; additional sizes via extra <link rel="apple-touch-icon" sizes="..."> lines.

Adaptive icon

Android's per-OEM masked-icon system. Reads from the webmanifest's 192 and 512 PNGs when purpose: "any maskable" is set. The mask shape varies by device (circle on Pixel, squircle on Samsung).

Theme color

Two distinct fields with the same name. The <meta name="theme-color"> controls the live browser-chrome color; the manifest's theme_color controls the install-prompt UI.

Maskable purpose

An icon flag indicating the asset has a safe zone for OEM masking. Without it, Android's adaptive icon system overlays a static badge rather than masking the icon itself.

Pinned tab mask icon

A monochrome SVG previously requested by Safari for pinned tabs. Deprecated in Safari 16; do not ship.

Related concepts

PWA install criteria:

the conditions browsers check before showing an install prompt (HTTPS, served manifest, valid 192 and 512 icons, controlled service worker for some platforms).

Web App Manifest spec:

W3C specification for the .webmanifest file; current draft adds screenshots, shortcuts, and share_target fields beyond the favicon-only scope.

Color profiles in PNG:

Chrome and Firefox honor embedded ICC profiles in favicon PNGs; mismatched profiles between the ICO frame and the SVG can shift the apparent color.

CSP and favicons:

img-src 'self' is enough for favicons referenced from the same origin; CDN-hosted favicons need the CDN domain in img-src.

Browser favicon cache:

Chrome caches per profile until 7 days or a manual cache clear; Firefox per session; Safari aggressively until force-quit.