Favicon & app-icon families from a single source

Every site ships a favicon. Fewer sites ship a complete favicon family — the kind that looks right as a pinned tab, a home-screen shortcut, a PWA splash screen, and a Windows Start tile, all at once. The gap is not ambition; it is the sheer number of files required and the mess that accumulates when each one is exported manually at different moments in a project's life.

This guide walks the full family: what each file does, the exact sizes and formats, how to wire the HTML and manifest, and how a single high-resolution master keeps everything in sync across releases.

Why "just a favicon" is not enough

A browser tab favicon is one surface among many. When a visitor taps "Add to Home Screen" on iOS, the system reaches for apple-touch-icon.png. When Android adds a PWA shortcut, it reaches into the web manifest. When someone pins your site in Windows, the OS checks for tile metadata. When a browser tab is set as the active tab in a desktop session, a 16 × 16 or 32 × 32 raster is still the right size even though the full-color SVG is also there.

Each of these is a distinct file with distinct requirements. They all need to look like the same icon.

The complete modern favicon family

The ICO file is intentionally minimal — just 16 × 16 and 32 × 32. The SVG handles every modern browser; the ICO is there for the edge cases it cannot reach.

The SVG favicon

A modern SVG favicon is declared with a MIME type of image/svg+xml. It scales perfectly to any device pixel ratio and, crucially, it can respond to the OS light/dark preference with a <style> block inside the SVG itself:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .icon-bg { fill: #1e40af; }
    @media (prefers-color-scheme: dark) {
      .icon-bg { fill: #60a5fa; }
    }
  </style>
  <rect class="icon-bg" rx="4" width="32" height="32"/>
  <!-- icon paths here -->
</svg>

This is the only favicon format that adapts to the system color scheme without JavaScript. For the full authoring spec — viewBox, currentColor, stroke hygiene — see the guide on themeable icons with currentColor.

The ICO fallback

The .ico container holds multiple raster layers. A favicon-only ICO needs just two: 16 × 16 and 32 × 32, both 32-bit RGBA. That covers every scenario the SVG misses: Internet Explorer (rare, but some intranet deployments still run it), older Edge, and the handful of OS contexts — Windows taskbar pin dialogs, Windows file-manager quick-launch areas — that request a raster rather than the SVG.

Keep the ICO small. A favicon ICO is not the same artifact as a full Windows app icon ICO (which needs 16 through 256). Conflating the two produces an unnecessarily large file served on every page load. The full Windows app ICO discussion belongs in packaging and final delivery.

The Apple touch icon

iOS and iPadOS use apple-touch-icon.png — a 180 × 180 PNG — as the home-screen icon when a visitor saves a site or installs a web app. The system rounds the corners and applies a gloss-free treatment automatically; do not pre-bake rounded corners or shadows into the artwork.

180 × 180 is the right single-file size because it covers the largest current iPhone display density (3× Retina at a 60 pt icon slot = 180 px). The OS scales down from 180 px for older devices. Providing multiple sizes through separate <link> tags for older resolutions is no longer necessary.

The file goes in the site root or is declared explicitly:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Place the PNG in the web root as well as declaring it with the link tag — iOS can fall back to root-discovery if the tag is missing.

The web app manifest and PWA icons

The site.webmanifest is a JSON file that browsers and mobile OSes read to configure PWA installation — short name, display mode, theme color, background color, and most importantly the icon set. Two sizes are the baseline requirement:

• 192 × 192 — the smallest size the Android Chrome installer accepts as a valid installable PWA.
• 512 × 512 — used for splash screens displayed while the PWA is loading.

A third entry — a maskable icon — enables Android's adaptive icon system, where the launcher crops your icon into a circle, rounded square, or other shape depending on the device skin. The maskable icon must keep all meaningful content within the central 80% of the canvas (a 409 × 409 px circle inside the 512 × 512 frame). The outer 20% can be filled with a background color or pattern; it will be cropped away.

Declare each purpose separately rather than combining them into a single entry marked "any maskable" — that combination is deprecated in the spec and tends to produce over-padded icons on some surfaces and under-padded icons on others:

{
  "name": "My Application",
  "short_name": "MyApp",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#2563eb",
  "icons": [
    {
      "src": "/icon-192.png",
      "type": "image/png",
      "sizes": "192x192",
      "purpose": "any"
    },
    {
      "src": "/icon-512.png",
      "type": "image/png",
      "sizes": "512x512",
      "purpose": "any"
    },
    {
      "src": "/icon-maskable.png",
      "type": "image/png",
      "sizes": "512x512",
      "purpose": "maskable"
    }
  ]
}

The manifest is referenced from each HTML page's <head>:

<link rel="manifest" href="/site.webmanifest">

The Windows tile

If any portion of your audience uses Windows with a pinned Start tile, a browserconfig.xml file lets you specify tile images and a tile background color. At minimum, a 150 × 150 PNG (mstile-150x150.png) covers the medium tile. Larger tiles (310 × 310 square, 310 × 150 wide) are optional and only visible when the user resizes their tile.

Modern Windows 11 uses the web manifest rather than browserconfig.xml for progressive web apps installed via Edge — so if you already have the manifest in place, Windows 11 PWA installs will use the 512 × 512 icon from it. The browserconfig.xml path still matters for users who pin a non-PWA site from a legacy Edge or Internet Explorer surface, which shows up in corporate environments.

Wiring it all together

The complete <head> block for favicon declaration:

<!-- SVG: modern browsers, all DPIs, light/dark-aware -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

<!-- ICO: legacy browsers and OS pin surfaces -->
<link rel="icon" type="image/x-icon" href="/favicon.ico" sizes="32x32">

<!-- Apple touch icon: iOS/iPadOS home screen -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- PWA manifest: Android home screen, splash, installability -->
<link rel="manifest" href="/site.webmanifest">

<!-- Windows tile color (optional, for non-PWA Start pins) -->
<meta name="msapplication-TileColor" content="#2563eb">

<!-- Theme color: browser chrome on mobile -->
<meta name="theme-color" content="#2563eb">

The order matters for browser parsing — SVG first, ICO second. Browsers that understand SVG will stop at the first match; browsers that do not will fall through to the ICO entry.

Generating the whole family from one master

Hand-exporting seven files across multiple design-tool sessions is how inconsistencies creep in. The right model is a single high-resolution source — a 1024 × 1024 PNG or a vector master at the same effective resolution — from which every family member is derived on each release.

The source properties that matter most for the downstream family:

• No transparency in the App Store/home-screen icons — the 180 × 180 apple-touch and the 512 × 512 manifest icons should use a solid background. Transparent icons look broken on colored home-screen backgrounds.
• Transparency in the SVG favicon — the SVG is rendered against the browser chrome, which varies by OS theme. Let it be transparent so your shape reads cleanly against both light and dark chrome.
• Separate maskable source — the standard icon is typically designed edge-to-edge; the maskable variant needs the same artwork centered in an 80% safe zone with background fill to the edges. Trying to share one source for both purposes produces either a cropped standard icon or an over-padded maskable one.

For the mechanics of building out the full Windows ICO and macOS ICNS containers from the same master, see one icon system across platforms and the complete packaging walkthrough in packaging and final delivery.

Verification checklist

Before pushing any icon change to production, confirm each surface manually:

• Open a fresh incognito tab and check the browser tab favicon — both in light and dark OS mode.
• Add the page to an iOS home screen (Simulator is fine) and verify the touch icon.
• In Chrome DevTools > Application > Manifest, confirm all three manifest icon entries resolve with a green status indicator.
• On Windows, right-click the browser tab and choose "Pin to taskbar" — verify the ICO at 16 × 16 is recognizable, not a blurred blob.
• Run a Lighthouse PWA audit and confirm no installability warnings about icon sizes or missing manifest fields.