ICO Favicon Export: Multi-Size Design and Modern PWA Manifest

What Modern Favicons Need

In 1999, a favicon was a 16×16 ICO file in the website root. In 2026, browsers, operating systems, PWAs (Progressive Web Apps), and app stores expect:

• 16×16, 32×32 ICO (legacy IE, browser tab)
• 48×48 ICO (Windows taskbar)
• 192×192, 512×512 PNG (PWA, Android)
• Apple Touch Icons (180×180, multiple legacy sizes)
• 192×192, 512×512 PNG with purpose: maskable (PWA adaptive icons)
• favicon.ico in root (legacy compatibility)

This means generating roughly 12-15 image variants from one source design. Manual export is tedious; automated tools are essential.

This post covers the modern favicon workflow. For broader image format context, see Best Image Format for Web SEO.

Required Sizes for 2026

For the legacy favicon.ico: package 16, 32, 48 PNGs into a multi-size ICO file.

Source Design Considerations

For a favicon to work at all sizes:

• Solid background: avoid transparent backgrounds for non-PWA contexts
• Simple shape: legible at 16×16 (5×5 pixel resolution effectively)
• High contrast: visible on light and dark backgrounds
• No text: can't read text at 16×16
• Square aspect: all favicon contexts are square

For most brands: design at 256×256 or 512×512, then scale down. Verify legibility at smallest size.

Tools That Generate Multi-Size

For most teams: RealFaviconGenerator.net is the practical choice. Tests against actual browsers and OSes.

For programmatic generation:

# ImageMagick: generate all sizes from a 512×512 source
convert source.png -resize 16x16 favicon-16.png
convert source.png -resize 32x32 favicon-32.png
convert source.png -resize 48x48 favicon-48.png
convert source.png -resize 192x192 android-chrome-192.png
convert source.png -resize 512x512 android-chrome-512.png
convert source.png -resize 180x180 apple-touch-icon.png

# Multi-size ICO
convert favicon-16.png favicon-32.png favicon-48.png favicon.ico

For batch processing patterns, see Batch Processing Files Guide.

HTML Reference

The modern favicon HTML:

<!-- Standard browsers -->
<link rel="icon" type="image/x-icon" href="/favicon.ico" />

<!-- Higher-resolution -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />

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

<!-- Android / PWA -->
<link rel="manifest" href="/manifest.webmanifest" />

<!-- Microsoft Tile -->
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="msapplication-config" content="/browserconfig.xml" />

Web App Manifest

For PWAs, include a manifest.webmanifest:

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

The purpose: "maskable" icon is for adaptive icons on Android. Designed with safe-zone padding so OS can crop to circle/square/etc.

Maskable Icons

Android's adaptive icons crop to various shapes (circle, rounded square, squircle). For your icon to display correctly:

• 80% safe area in the center (the "minimum visible region")
• Outer 10% on each edge can be cropped
• Solid background (not transparent) to fill the cropping shape

Tools for testing maskable icons:

• maskable.app (online tool)
• Android Studio (preview adaptive icons)

For broader image preparation, see our image converter.

SVG Favicons

Modern browsers support SVG favicons:

<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="alternate icon" href="/favicon.ico" />

SVG advantages:

• Single file scales to any size
• Smaller than equivalent PNG (often 1-3 KB)
• Can include media queries (different colors for light/dark mode)

SVG dark mode example:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    @media (prefers-color-scheme: dark) {
      circle { fill: #ffffff; }
    }
    circle { fill: #000000; }
  </style>
  <circle cx="16" cy="16" r="14"/>
</svg>

The favicon adapts to user's theme preference. Browser shows correct version automatically.

ICO Format Details

ICO files can contain multiple sizes in one file:

# Combine multiple PNGs into multi-size ICO
convert size16.png size32.png size48.png favicon.ico

Browsers pick the appropriate size from the multi-size ICO automatically. For broadest compatibility: include 16, 32, 48 sizes minimum.

For our image converter, ICO output is supported.

Common Issues

Favicon doesn't update after change: browser cache. Force refresh with Ctrl+F5 or clear browser cache. Server-side: increment query string favicon.ico?v=2.

Apple Touch Icon shows generic: missing from HTML or wrong size. Verify 180×180 exists at the specified path.

PWA icon looks bad on Android: not maskable or missing. Add purpose: "maskable" icon with safe-zone padding.

Multi-size ICO too large: each size adds bytes. Limit to 16, 32, 48 (smallest sizes most needed in legacy contexts).

SVG favicon doesn't show in older browsers: provide ICO fallback alongside SVG.

For SVG-specific context, see EPS to SVG Conversion.

Frequently Asked Questions

Should I use SVG favicon or PNG?

Both. SVG for modern browsers (small file, scalable, dark-mode aware). PNG/ICO for legacy compatibility.

What about Apple's "icon" format?

Apple accepts multi-size ICO and PNG. The apple-touch-icon PNG is what iOS uses for "Add to Home Screen."

Does favicon affect SEO?

Yes. Google indexes favicons in search results. Missing or generic favicon hurts brand recognition.

How big should the favicon.ico file be?

Multi-size ICO with 16, 32, 48: ~5-10 KB. Larger sizes inflate the file with diminishing returns.

Does Safari support SVG favicons?

Yes since Safari 13.1. For older Safari users: provide PNG fallback.

What about the apple-mobile-web-app-status-bar-style?

<meta name="apple-mobile-web-app-status-bar-style" content="default" />

Affects status bar color when site is "Added to Home Screen" on iOS. Options: default, black, black-translucent.

Related Reading

• Best Image Format for Web SEO
• EPS to SVG Conversion
• JPEG XL vs AVIF

Bottom Line

For modern favicon export in 2026: 12+ size variants (16-512px), SVG favicon for modern browsers, ICO for legacy. PWA manifest for app-like experiences. RealFaviconGenerator.net or ImageMagick for batch generation. Test maskable icons on Android. Our image converter handles ICO and PNG conversion.