Favicon Guide 2026: All Sizes, Formats, and How to Generate Them

Favicons are the tiny icons that appear in browser tabs, bookmarks, home screens, and app switchers. Despite their small size, they have an outsized impact on brand recognition and user experience. Yet the favicon ecosystem in 2026 remains confusing — dozens of sizes, multiple formats, and conflicting advice. This complete favicon guide cuts through the noise and tells you exactly what you need, why, and how to generate favicons programmatically or from design tools like Figma.

The Minimal Favicon Setup: Just 3 Files You Actually Need

The internet is full of articles telling you to create 20+ favicon files. The truth is that in 2026, you only need three files to cover every modern browser, device, and platform:

Optionally, you can add an SVG favicon for infinite scalability and dark mode support. But those three files alone give you complete coverage across Chrome, Firefox, Safari, Edge, iOS, and Android.

<!-- The minimal favicon setup for 2026 -->
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">

Complete Favicon Size Reference

Here is the definitive reference table for every favicon size, its purpose, and where it is used:

The most commonly requested sizes are 32x32 (browser tabs), 180x180 (Apple devices), and 512x512 (PWA splash screens). If you only provide these three, you cover over 99% of use cases.

Format Comparison: ICO vs PNG vs SVG

Choosing the right favicon format matters. Each format has distinct advantages and trade-offs:

Recommendation: Use ICO for the /favicon.ico fallback, PNG for Apple Touch Icon and web manifest icons, and optionally SVG for modern browsers that support it. This three-format strategy covers every scenario.

Step-by-Step: Creating Favicons

From Figma

Programmatically with Sharp (Node.js)

You can automate favicon generation from a single high-resolution source image using the sharp library:

import sharp from 'sharp';

// Generate multiple sizes from a single source
const sizes = [16, 32, 48, 180, 192, 512];

async function generateFavicons(sourceFile: string) {
  for (const size of sizes) {
    await sharp(sourceFile)
      .resize(size, size, {
        fit: 'contain',
        background: { r: 0, g: 0, b: 0, alpha: 0 },
      })
      .png({ quality: 90, compressionLevel: 9 })
      .toFile(`favicon-${size}x${size}.png`);

    console.log(`Generated favicon-${size}x${size}.png`);
  }
}

generateFavicons('icon-source.png');

For generating the ICO file, use the png-to-ico package:

import pngToIco from 'png-to-ico';
import { writeFileSync } from 'fs';

async function generateIco() {
  // Include 16x16, 32x32, and 48x48 in a single ICO file
  const icoBuffer = await pngToIco([
    'favicon-16x16.png',
    'favicon-32x32.png',
    'favicon-48x48.png',
  ]);
  writeFileSync('favicon.ico', icoBuffer);
  console.log('Generated favicon.ico');
}

generateIco();

Complete Build Script

Here is a complete Node.js script that generates all required favicon files from a single source PNG:

#!/usr/bin/env node
// generate-favicons.mjs
// Usage: node generate-favicons.mjs icon-source.png

import sharp from 'sharp';
import pngToIco from 'png-to-ico';
import { writeFileSync, mkdirSync } from 'fs';

const SOURCE = process.argv[2] || 'icon-source.png';
const OUT_DIR = './public';

mkdirSync(OUT_DIR, { recursive: true });

async function main() {
  // 1. Generate PNG sizes
  const pngSizes = [
    { size: 16, name: 'favicon-16x16.png' },
    { size: 32, name: 'favicon-32x32.png' },
    { size: 48, name: 'favicon-48x48.png' },
    { size: 180, name: 'apple-touch-icon.png' },
    { size: 192, name: 'icon-192x192.png' },
    { size: 512, name: 'icon-512x512.png' },
  ];

  for (const { size, name } of pngSizes) {
    await sharp(SOURCE)
      .resize(size, size, {
        fit: 'contain',
        background: { r: 0, g: 0, b: 0, alpha: 0 },
      })
      .png({ compressionLevel: 9 })
      .toFile(`${OUT_DIR}/${name}`);
    console.log(`  Created ${name}`);
  }

  // 2. Generate ICO (combines 16, 32, 48)
  const icoBuffer = await pngToIco([
    `${OUT_DIR}/favicon-16x16.png`,
    `${OUT_DIR}/favicon-32x32.png`,
    `${OUT_DIR}/favicon-48x48.png`,
  ]);
  writeFileSync(`${OUT_DIR}/favicon.ico`, icoBuffer);
  console.log('  Created favicon.ico');

  // 3. Generate manifest.webmanifest
  const manifest = {
    name: 'Your App Name',
    short_name: 'App',
    icons: [
      { src: '/icon-192x192.png', sizes: '192x192', type: 'image/png' },
      { src: '/icon-512x512.png', sizes: '512x512', type: 'image/png', purpose: 'any maskable' },
    ],
    theme_color: '#ffffff',
    background_color: '#ffffff',
    display: 'standalone',
  };
  writeFileSync(
    `${OUT_DIR}/manifest.webmanifest`,
    JSON.stringify(manifest, null, 2)
  );
  console.log('  Created manifest.webmanifest');

  console.log('\nDone! All favicon files generated.');
}

main().catch(console.error);

HTML Markup: Exact Link Tags and Manifest

Add these tags to the <head> of every page on your site:

<head>
  <!-- Favicon: ICO fallback for legacy browsers -->
  <link rel="icon" href="/favicon.ico" sizes="32x32">

  <!-- Favicon: SVG for modern browsers (scalable + dark mode) -->
  <link rel="icon" href="/icon.svg" type="image/svg+xml">

  <!-- Apple Touch Icon: iOS home screen -->
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">

  <!-- Web App Manifest: Android + PWA -->
  <link rel="manifest" href="/manifest.webmanifest">

  <!-- Optional: theme color for browser chrome -->
  <meta name="theme-color" content="#ffffff"
        media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="#1a1a2e"
        media="(prefers-color-scheme: dark)">
</head>

Create a manifest.webmanifest (or site.webmanifest) in your root directory:

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

The manifest file tells Android and PWA environments which icons to use. The "purpose": "any maskable" value ensures the icon works both as a regular icon and within Android's adaptive icon mask (the rounded shape that varies by device manufacturer).

Dark Mode Favicons with SVG

One of the most powerful features of SVG favicons is the ability to adapt to the user's color scheme using CSS prefers-color-scheme inside the SVG itself:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
  <style>
    /* Light mode (default) */
    .icon-bg { fill: #1a1a2e; }
    .icon-fg { fill: #ffffff; }

    /* Dark mode override */
    @media (prefers-color-scheme: dark) {
      .icon-bg { fill: #e0e0e0; }
      .icon-fg { fill: #1a1a2e; }
    }
  </style>

  <!-- Background circle -->
  <circle class="icon-bg" cx="64" cy="64" r="60" />

  <!-- Foreground shape (your logo/icon) -->
  <path class="icon-fg"
        d="M44 40 h40 v12 H56 v8 h24 v12 H56 v16 H44 V40z" />
</svg>

This SVG favicon will automatically switch between dark and light versions based on the user's operating system or browser theme preference. No JavaScript required — it is purely declarative. This works in Chrome, Firefox, and Edge. Safari supports SVG favicons but has inconsistent dark mode behavior as of early 2026.

Reference this SVG in your HTML:

<!-- SVG favicon with automatic dark mode -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">

<!-- ICO fallback for browsers that don't support SVG favicons -->
<link rel="icon" href="/favicon.ico" sizes="32x32">

Testing Your Favicons on Every Platform

After generating your favicons, test them across all platforms to ensure they render correctly:

Quick checklist for verifying your favicon setup:

# Verify all favicon files exist and are accessible
curl -s -o /dev/null -w "%{http_code}" https://yoursite.com/favicon.ico
# Expected: 200

curl -s -o /dev/null -w "%{http_code}" https://yoursite.com/icon.svg
# Expected: 200

curl -s -o /dev/null -w "%{http_code}" https://yoursite.com/apple-touch-icon.png
# Expected: 200

curl -s -o /dev/null -w "%{http_code}" https://yoursite.com/manifest.webmanifest
# Expected: 200

# Validate manifest JSON
curl -s https://yoursite.com/manifest.webmanifest | python3 -m json.tool
# Should output formatted JSON without errors

Frequently Asked Questions

What is the minimum number of favicon files I need?

You need a minimum of three files: favicon.ico (32x32) for browser tabs and legacy support, apple-touch-icon.png (180x180) for iOS home screen bookmarks, and a 512x512 PNG referenced in your manifest.webmanifest for Android and PWA platforms. These three files cover over 99% of devices and browsers in 2026.

Should I use SVG or PNG for my favicon?

Use both. PNG is required for Apple Touch Icons and web manifest icons since iOS and Android do not support SVG in those contexts. SVG is excellent as the primary browser tab favicon because it scales perfectly to any resolution and supports dark mode via CSS prefers-color-scheme. Declare both in your HTML with the SVG as the preferred icon and ICO/PNG as the fallback.

Does favicon size affect page load speed?

Favicon files are typically very small (under 15 KB) and are cached aggressively by browsers, so their impact on page load speed is negligible. However, avoid unnecessarily large files — a 512x512 PNG should be well under 50 KB when optimized. Use PNG compression tools or the sharp library with quality settings to keep file sizes minimal.

How do I make my favicon change in dark mode?

Use an SVG favicon with an embedded <style> block containing a @media (prefers-color-scheme: dark) query. Inside that query, change the fill colors of your SVG paths. Then reference the SVG in your HTML with <link rel="icon" href="/icon.svg" type="image/svg+xml">. This works in Chrome, Firefox, and Edge. Safari has limited support as of 2026.

What is the purpose of maskable icons in the web manifest?

Maskable icons are designed for Android's adaptive icon system, where the OS crops the icon into various shapes (circle, rounded square, squircle) depending on the device manufacturer. A maskable icon includes extra padding — a "safe zone" — so that important parts of the icon are not cut off when masked. Set "purpose": "any maskable" in your manifest if your icon has sufficient padding, or provide separate entries for "any" and "maskable" purposes.

Do I still need a favicon.ico file in 2026?

Yes. While modern browsers support PNG and SVG favicons, many tools and services still request /favicon.ico from your root directory automatically. RSS readers, crawlers, enterprise browsers, and some older email clients look specifically for this file. Additionally, if you do not provide explicit favicon link tags, browsers will fall back to requesting /favicon.ico. It costs almost nothing to include and prevents 404 errors in your server logs.