DEV Community

toolzip
toolzip

Posted on Originally published at toolzip.app

Everything You Need to Know About Favicons in 2026

#webdev #html #toolzip

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">
Enter fullscreen mode Exit fullscreen mode

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?

Size Used for
16×16 Browser tab (standard displays)
32×32 Browser tab (retina), taskbar
48×48 Windows shortcut icons
180×180 iOS home screen (Apple Touch Icon)
192×192 Android home screen, PWA
512×512 PWA splash screen, high-DPI

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'));
}
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)