The Modern Favicon & App Icon Specification Guide (2026)

For nearly a decade, generating a favicon required managing a chaotic archive of 15 to 30 image files. Frontend developers routinely pasted dozens of lines of vendor-specific <meta> tags and <link> elements into their <head> markup, catering to legacy Windows 8 Metro tiles (mstile-144x144.png), obsolete Safari pinned tab masks (mask-icon), and redundant raster size variants (android-chrome-36x36.png, favicon-96x96.png, favicon-194x194.png).

In 2026, web standards and mobile operating systems have converged. The modern favicon specification discards this legacy bloat in favor of four <head> declarations (six files in total) that deliver vector scalability, automatic dark mode adaptation, and backward compatibility with far fewer HTTP requests.

The Modern Favicon Architecture: 4 Declarations, 6 Files

The 2026 icon specification consolidates all browser, operating system, and crawler requirements into four purpose-built declarations:

flowchart TD
    Request["Incoming Browser / Device Request"] --> Router{"Client Environment & Request Type"}
    
    Router -->|"Modern Desktop Browser<br/>(Chrome, Edge, Firefox, Safari 26+)"| SVG["favicon.svg<br/>Vector, Infinite Scaling, Dark Mode via CSS"]
    Router -->|"Older Safari, Desktop Shortcut,<br/>or Root Crawler (/favicon.ico)"| ICO["favicon.ico<br/>Binary Container: 16×16 & 32×32 PNG Layers"]
    Router -->|"Apple iOS Home Screen Bookmark<br/>(iPhone & iPad WebKit)"| Apple["apple-touch-icon.png<br/>Flat Square 180×180 PNG (Auto-Masked by iOS)"]
    Router -->|"Android PWA / Add to Home Screen<br/>(Chromium Mobile)"| Manifest["site.webmanifest<br/>Declares 192×192 & 512×512 PWA Icons"]

    SVG --> Screen["Rendered in Browser Tab Strip"]
    ICO --> Screen
    Apple --> MobileSpringboard["Rendered on iOS Springboard"]
    Manifest --> MobileDrawer["Rendered on Android App Launcher"]

1. favicon.svg (The Vector Primary)

Chrome, Edge, and Firefox prefer an SVG icon over raster formats when both are declared, and Safari joined them in Safari 26. Because SVG is declarative XML, it scales cleanly to any display density—from standard 1080p desktop monitors to 5K Retina displays—without discrete raster files for each scale factor. Crucially, an SVG favicon can embed CSS media queries that automatically adapt brand colors to the user’s light or dark theme.

2. favicon.ico (The Resilient Fallback)

Despite broad SVG support, .ico remains indispensable. Older Safari versions, RSS readers, desktop bookmark tools, and many crawlers skip HTML declarations entirely and issue a hardcoded GET request to https://example.com/favicon.ico. Omitting this file triggers recurring 404 Not Found errors in server access logs. A modern favicon.ico contains PNG-compressed layers at 16×16 and 32×32 pixels; a 48×48 layer is an optional extra for desktop shortcuts. Do not rely on the ICO for Google Search: Google requires only a square icon of at least 8×8px but recommends one larger than 48×48px, and it also reads rel="apple-touch-icon", so the SVG or the 180×180 Apple Touch icon covers that recommendation.

3. apple-touch-icon.png (The iOS Standard)

Do not rely on the SVG favicon for iOS home screen icons: Apple documents the touch icon as a PNG, and iOS versions before Safari 26 cannot render SVG icons at all. When a user adds a site to an iPhone or iPad home screen, Safari looks for apple-touch-icon.png first; manifest icons are only a fallback (supported since iOS 15.4) when no touch icon exists. Apple expects a flat, opaque 180×180 PNG (a 60×60 point icon at 3x Retina density). The operating system clips the icon to its own continuous-curvature rounded mask automatically.

4. site.webmanifest (The PWA Specification)

Chromium-based mobile browsers (Google Chrome, Samsung Internet, Brave on Android) defer icon selection for Progressive Web Apps and “Add to Home Screen” actions to the Web App Manifest. The manifest references two standard raster icons: 192×192 for home screens and task switchers, and 512×512 for install prompts and splash screens.

Production-Ready <head> HTML Specification

To implement the modern favicon specification, place the following four <link> tags (plus an optional theme-color meta tag) within the <head> of your HTML document:

<!-- Modern 2026 Favicon Specification -->
<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="#4F46E5" />

The sizes="32x32" Attribute on the ICO Declaration

The explicit sizes="32x32" on the .ico declaration works around a known Chromium icon-selection quirk.

Earlier versions of this widely copied pattern used sizes="any" on the ICO link. Chromium treated that as an “any-size” candidate and frequently chose the .ico over the SVG declared after it, which silently disabled vector rendering and dark-mode switching. Declaring the ICO’s real size (sizes="32x32") and marking the SVG with type="image/svg+xml" lets modern browsers pick the scalable SVG, while browsers that cannot render SVG favicons fall back to the 32px .ico.

The site.webmanifest Configuration

Create a file named site.webmanifest in your website root:

{
  "name": "My Web Application",
  "short_name": "WebApp",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "/maskable-icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "theme_color": "#4F46E5",
  "background_color": "#FFFFFF",
  "display": "standalone"
}

The third entry is optional but recommended. An icon with "purpose": "maskable" lets Android’s adaptive icon engine crop the image into circles, rounded squares, or teardrops depending on the launcher, without letterboxing. Keep it as a separate file rather than declaring "purpose": "any maskable" on one image: a maskable icon needs extra padding, so reusing it in “any” contexts (tabs, install prompts, shortcuts) makes the logo look shrunken.

Vector Favicons & Native Dark Mode Switching via CSS

The most powerful capability of modern SVG favicons is their ability to respond to the user’s appearance settings without executing JavaScript.

When a browser renders an SVG favicon in a tab strip, it evaluates the CSS embedded inside the SVG. By combining CSS custom properties with the @media (prefers-color-scheme: dark) media query, your icon adjusts its fills and strokes to stay legible against both light and dark browser chrome:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    :root {
      --brand-primary: #1E293B; /* Deep slate for light browser tabs */
      --brand-accent: #4F46E5;  /* Indigo accent */
    }
    @media (prefers-color-scheme: dark) {
      :root {
        --brand-primary: #F8FAFC; /* Crisp white for dark browser tabs */
        --brand-accent: #818CF8;  /* Light indigo accent */
      }
    }
    .glyph-accent {
      fill: var(--brand-accent);
    }
    .glyph-base {
      fill: none;
      stroke: var(--brand-primary);
      stroke-width: 10;
      stroke-linecap: round;
    }
  </style>
  <circle cx="50" cy="50" r="45" class="glyph-accent" />
  <path d="M30 50 L45 65 L70 35" class="glyph-base" />
</svg>

All colors are applied through CSS rules rather than var() inside presentation attributes, which keeps the icon consistent across rendering engines.

Security Sandboxing of Favicon SVGs

Browsers render SVG favicons in a restricted image context:

• No Script Execution: Any <script> tags or event-handler attributes embedded inside the SVG are ignored.
• No External Resource Fetching: External stylesheets (@import), web fonts (@font-face with a remote url()), and externally linked images are not loaded.
• Isolated State: The SVG cannot inspect the parent page’s DOM or access cookies, local storage, or session tokens.

All styles, shapes, and colors must therefore be self-contained within the SVG file.

Deep Binary Dissection of the Windows .ico File Format

To understand why .ico files behave differently from standard web images, one must examine their binary structure. An .ico file is not a single raster image; it is a resource directory container defined by Microsoft Windows in the early 1990s.

A valid .ico file consists of three contiguous binary sections:

1. The ICONDIR header (6 bytes).
2. An array of ICONDIRENTRY directory records (16 bytes per image layer).
3. The raw image data blocks (either legacy DIB bitmaps or modern PNG byte streams).

1. The 6-Byte ICONDIR Header

The first 6 bytes establish the container identity:

• Reserved (Bytes 0–1, 16-bit unsigned little-endian): Must always be 0. Parsers reject files where this field is non-zero.
• Type (Bytes 2–3, 16-bit unsigned little-endian): Specifies the resource type. 1 designates an Icon (.ico); 2 designates a Cursor (.cur).
• Count (Bytes 4–5, 16-bit unsigned little-endian): The total number of image layers packed inside the file. For a favicon containing 16×16 and 32×32 layers, Count is 2.

You can verify this header on any live site. GitHub’s production favicon, inspected on macOS (xxd and file are also available on most Linux distributions):

curl -s -o gh.ico https://github.com/favicon.ico
xxd -l 6 gh.ico
# 00000000: 0000 0100 0200                           ......
file gh.ico
# gh.ico: MS Windows icon resource - 2 icons, 16x16, 32 bits/pixel, 32x32, 32 bits/pixel

The bytes 0000 0100 0200 decode as Reserved=0, Type=1, Count=2 (little-endian): exactly the 16px + 32px pattern described above.

2. The 16-Byte ICONDIRENTRY Record

Immediately following the ICONDIR header are N directory records, each precisely 16 bytes long:

• bWidth (Byte 0, 8-bit uint): Pixel width. Values 1–255 represent their exact pixel dimension. A value of 0 denotes a width of 256 pixels.
• bHeight (Byte 1, 8-bit uint): Pixel height. Follows the same encoding as width (0 denotes 256 pixels).
• bColorCount (Byte 2, 8-bit uint): Number of palette colors. For 24-bit or 32-bit truecolor images, this is set to 0.
• bReserved (Byte 3, 8-bit uint): Reserved byte; must be 0.
• wPlanes (Bytes 4–5, 16-bit uint): Color planes. Should be set to 1.
• wBitCount (Bytes 6–7, 16-bit uint): Bits per pixel. Set to 32 for full 8-bit RGBA color channels with alpha transparency.
• dwBytesInRes (Bytes 8–11, 32-bit uint): Total byte length of the corresponding image data chunk.
• dwImageOffset (Bytes 12–15, 32-bit uint): Absolute byte offset from the start of the .ico file to the beginning of the image data chunk.

3. Modern PNG Compression vs. Legacy DIB Bitmaps

In legacy Windows XP icons, image data chunks contained raw Device Independent Bitmaps (BITMAPINFOHEADER) alongside 1-bit transparency masks (AND mask). A 32-bit 16×16 layer costs about 1.1 KB and a 32×32 layer about 4.3 KB uncompressed; desktop icons that add 48, 64, and 256px layers quickly exceed 100 KB.

Since Windows Vista, the ICO format permits image chunks to contain standard, compressed PNG bitstreams, and all modern browsers accept them. Decoders detect the 8-byte PNG file signature (0x89 0x50 0x4E 0x47 0x0D 0x0A 0x1A 0x0A) at the specified dwImageOffset and decode the PNG natively. For flat logo artwork, this typically keeps a 16px + 32px favicon.ico in the 1–3 KB range.

Utiliome’s In-Browser Favicon Generator: What It Covers

Utiliome’s client-side Favicon Generator produces the raster half of this specification. Rather than uploading unreleased brand assets to remote servers, the generator runs entirely in your browser using the HTML5 Canvas 2D API, JavaScript typed arrays, and JSZip.

Important: The generator does not create favicon.svg. Write the SVG by hand using the dark-mode template above (or clean an exported logo with the SVG Optimizer), then add the SVG <link> tag to your <head>.

What the Exported favicon-package.zip Contains

• favicon.ico with three PNG-compressed layers (16×16, 32×32, 48×48), including the optional 48px layer for desktop shortcuts.
• Standalone PNGs: favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, apple-touch-icon.png (180×180), android-chrome-192x192.png, and android-chrome-512x512.png.
• site.webmanifest with your app name, theme color, and the 192/512px icons (no maskable entry).
• head-tags.html: a classic snippet that references favicon.ico, the 16px and 32px PNGs, the Apple Touch icon, and the manifest. To match the modern spec, swap the two PNG <link> lines for the favicon.svg line and add sizes="32x32" to the ICO line, as shown in the HTML block above.

Pure Client-Side Binary Packing (packMultiLayerIco)

To create genuine multi-resolution .ico files in the browser, the generator serializes the ICONDIR structure described above with ArrayBuffer and DataView:

async function packMultiLayerIco(blobs: { size: number; blob: Blob }[]): Promise<Blob> {
  const buffers = await Promise.all(
    blobs.map(async (item) => ({
      size: item.size,
      bytes: new Uint8Array(await item.blob.arrayBuffer()),
    }))
  );
  
  const count = buffers.length;
  const headerSize = 6 + count * 16;
  const totalBytes = headerSize + buffers.reduce((acc, b) => acc + b.bytes.byteLength, 0);
  const out = new ArrayBuffer(totalBytes);
  const view = new DataView(out);
  const outBytes = new Uint8Array(out);

  // 1. Write 6-byte ICONDIR Header
  view.setUint16(0, 0, true);     // Reserved (0)
  view.setUint16(2, 1, true);     // Type 1 = ICO
  view.setUint16(4, count, true); // Image count (N)

  // 2. Write 16-byte ICONDIRENTRY descriptors and append PNG payloads
  let offset = headerSize;
  buffers.forEach((b, idx) => {
    const entryOffset = 6 + idx * 16;
    const dim = b.size >= 256 ? 0 : b.size;

    view.setUint8(entryOffset, dim);                  // Width
    view.setUint8(entryOffset + 1, dim);              // Height
    view.setUint8(entryOffset + 2, 0);                // Color count (0 = >=8bpp)
    view.setUint8(entryOffset + 3, 0);                // Reserved (0)
    view.setUint16(entryOffset + 4, 1, true);          // Color planes (1)
    view.setUint16(entryOffset + 6, 32, true);         // Bit depth (32-bit RGBA)
    view.setUint32(entryOffset + 8, b.bytes.byteLength, true); // Payload size
    view.setUint32(entryOffset + 12, offset, true);    // Absolute byte offset

    outBytes.set(b.bytes, offset);
    offset += b.bytes.byteLength;
  });

  return new Blob([out], { type: 'image/x-icon' });
}

Running xxd -l 6 favicon.ico on the generator’s output prints 0000 0100 0300: Count=3 for the 16, 32, and 48px layers.

Previews and Settings That Matter for This Spec

• Light & Dark Browser Tab Mockup: Shows the 32×32 PNG at 16 CSS pixels (the size a Retina tab uses) inside light and dark tab chrome, so you can spot a dark logo disappearing on dark tabs.
• Home Screen Mockup: Shows the 180×180 Apple Touch icon inside a rounded launcher tile.
• Background, Padding & Corner Radius: Alpha, White, Dark, or a custom color background; 0–30% padding; 0–50% corner radius. The rounding is applied with ctx.roundRect() and baked into every exported PNG, including apple-touch-icon.png.

Warning: The defaults are a transparent background and a 16% corner radius. For an iOS-compliant apple-touch-icon.png, set Corner Radius to 0% and choose a solid background before exporting (see the Apple rules below). For a maskable Android icon, export once more with Corner Radius 0%, a solid background, and about 22% padding for a square or wide logo (10% is only enough for a circular mark), then rename the 512px file to maskable-icon-512x512.png, and add the maskable manifest entry shown earlier.

If you are building native Windows software, Electron or Tauri apps, or taskbar launchers that need 64px, 128px, and 256px layers, use the dedicated ICO Converter instead.

Apple Touch Icon & PWA Asset Rules

When preparing raster assets for Apple devices and Progressive Web Apps, follow these production rules:

1. Never Pre-Round Apple Touch Icons

A common mistake is exporting apple-touch-icon.png with pre-rounded corners or transparent outer borders.

iOS applies its own rounded-corner mask (a continuous-curvature shape often approximated as a superellipse). If your PNG contains transparent pixels, iOS fills them with black, so pre-rounded corners appear as dark wedges under Apple’s mask. Always provide a 100% opaque, square 180×180 image.

2. Keep Maskable Artwork Inside the 80% Safe-Zone Circle

Android adaptive launchers crop maskable icons into different shapes (circles, rounded squares, squircles, or teardrops depending on the device and launcher).

To ensure your brand mark is never clipped:

• Keep your core logo inside the central circle whose diameter is 80% of the icon width (the “safe zone”, a 40% radius). A circular mark fits with 10% padding per side, but a square mark needs about 22% padding per side, because an 80%-wide square has a 113% diagonal and its corners fall outside the circle.
• Extend background colors or textures across the full 512×512 canvas.
• Declare the padded file with "purpose": "maskable" in a separate manifest icon entry.

Deployment & Verification Checklist

Before publishing your updated icon stack, verify each asset from the command line and the browser:

1. Verify Root /favicon.ico Availability: Request the file headers directly. Expect 200 and an icon content type (image/x-icon or image/vnd.microsoft.icon), not a redirect to your HTML homepage. Output from GitHub’s production favicon:

   curl -sI https://github.com/favicon.ico | grep -i -E "^HTTP|^content-type"
   # HTTP/2 200
   # content-type: image/x-icon

2. Confirm the ICO Is a Real Multi-Layer Container: Download it and run file favicon.ico. A renamed PNG reports PNG image data; a genuine container reports MS Windows icon resource - 2 icons (or 3 with a 48px layer).
3. Audit Dark Mode Transition: DevTools’ prefers-color-scheme emulation affects the page, not the browser’s tab strip. Open https://example.com/favicon.svg directly in a tab and toggle Rendering → Emulate CSS media feature prefers-color-scheme to check the colors, then switch your operating system appearance (macOS System Settings → Appearance, Windows Settings → Personalization → Colors) and confirm the tab icon changes (reload the page if it does not update immediately).
4. Set Sensible Cache Headers and Version Your Links: Favicons change rarely, but browsers keep them in a separate icon cache that ignores most refreshes. Reserve immutable for versioned URLs and give the fixed /favicon.ico path a plain lifetime:

   Cache-Control: public, max-age=604800

   When rebranding, append a cache-busting query string to every icon link (for example /favicon.svg?v=2 and /apple-touch-icon.png?v=2) so returning visitors fetch the new files.