Everything You Need to Know About Favicons in 2026

Favicon requirements have multiplied. Here's the current state, why it's complicated, and how to generate everything you need in the browser.

The Minimum Required

For a modern web app, you need:

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

The .ico format is still useful for IE compatibility, but if you don't care about IE, PNG works in all modern browsers.

Why So Many Sizes?

Generating Resized Favicons in the Browser

async function generateFavicon(imageFile, size) {
  const img = await loadImage(imageFile);
  const canvas = document.createElement('canvas');
  canvas.width = size;
  canvas.height = size;
  const ctx = canvas.getContext('2d');

  // Scale to fit, maintain aspect ratio
  const scale = Math.min(size / img.width, size / img.height);
  const w = img.width * scale;
  const h = img.height * scale;
  const x = (size - w) / 2;
  const y = (size - h) / 2;

  ctx.drawImage(img, x, y, w, h);

  return new Promise(resolve => canvas.toBlob(resolve, 'image/png'));
}

Generating an ICO File

ICO files contain multiple bitmap images at different sizes. There's no native browser API for ICO generation — you need to write the binary format directly:

function createIco(pngBlobs) {
  // ICO header: ICONDIR
  // For each image: ICONDIRENTRY + raw PNG data
  // This is a simplified version — full ICO spec at docs.microsoft.com
}

For simplicity in the browser, generate PNG files for each size and let the HTML handle size selection.

The HTML Snippet

After generating your favicons, the HTML looks like:

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Generate favicons at toolzip.app/tools/favicon-generator — no upload, runs in your browser.