Favicon and App Icon Formats: ICO, PNG, SVG, and More

Favicon implementation guides from 2015 recommended generating 20+ icon files at every conceivable size. That was overkill then and it's absurd now. In 2026, you need four files to cover every browser, every platform, and every edge case. But you need to understand what each file does and why it exists.

This guide covers the ICO format's multi-resolution architecture, why SVG favicons are the modern choice, Apple Touch Icon requirements, Web App Manifest icons, and the exact minimal set that covers 100% of real-world use cases. Need to generate icons? Convert PNG to ICO or SVG to ICO.

ICO: The Original Favicon Format

ICO (Icon) is a container format from Windows 1.0 (1985) that holds multiple images at different resolutions. A single .ico file contains a directory of images — typically 16x16, 32x32, 48x48, and optionally 256x256 — and the consuming application picks the most appropriate size.

ICO File Structure

An ICO file starts with a 6-byte header (reserved, image type, image count), followed by directory entries for each contained image (dimensions, color count, data offset, data size). Each image is stored as either uncompressed BMP data or PNG-compressed data.

BMP vs PNG inside ICO: Traditional ICOs contain BMP data (with a 40-byte BITMAPINFOHEADER but no file header). Modern ICOs can contain PNG data instead — smaller files, better alpha handling. All modern browsers and operating systems support PNG-inside-ICO. A favicon.ico with three PNG-compressed sizes (16x16, 32x32, 48x48) is typically 3-8KB total.

The 256x256 size should always use PNG compression inside the ICO. At 256x256 with 32-bit color, BMP data would be 260KB versus 5-15KB as PNG.

How Browsers Use ICO

Browsers still request /favicon.ico at the site root by default, even if you specify a different icon via <link rel="icon">. If the file doesn't exist, you get 404 errors in your server logs — harmless but noisy. Providing a favicon.ico silences these requests and serves as the ultimate fallback.

The browser selects the closest size from the ICO's directory. For tab icons (typically displayed at 16x16 or 32x32), it picks the 32x32 version. For bookmark icons, it may use 48x48. For taskbar/dock shortcuts on Windows, it may use 256x256 if available.

Create favicon.ico from your logo: PNG to ICO | SVG to ICO.

SVG Favicons: The Modern Choice

SVG favicons are supported in Chrome (since v80), Firefox (since v41), Edge (since Chromium), and Safari (since v15). That's 95%+ browser coverage in 2026.

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

Why SVG Favicons Are Better

Resolution independence: A single SVG renders crisply at every size — 16x16 tab icon, 32x32 bookmark, 256x256 shortcut. No need to generate multiple raster sizes. One file covers all displays at all densities.

Tiny file size: A simple logo as SVG favicon is 200-800 bytes. The equivalent ICO with three PNG sizes is 3-8KB. For a resource that's loaded on every single page view, this matters.

Dark mode support: SVG favicons can contain CSS @media (prefers-color-scheme: dark) queries that change colors based on the browser's theme. A black logo on light backgrounds and a white logo on dark backgrounds — automatically, from a single file:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><style>path { fill: #000; } @media (prefers-color-scheme: dark) { path { fill: #fff; } }</style><path d="M50 10..." /></svg>

No raster format can do this. Dark mode favicon support is a genuinely useful feature — on dark OS themes, dark logos become invisible as raster favicons.

SVG Favicon Limitations

SVG favicons don't work in Safari on iOS (as of iOS 17). iOS uses Apple Touch Icon instead (see below). SVG favicons also don't work in older browsers that some users still have.

The solution: provide SVG as the primary favicon for modern desktop browsers, ICO as fallback, and Apple Touch Icon for iOS. All three from a single source design.

Apple Touch Icon

When an iOS user adds your website to their home screen, iOS uses the Apple Touch Icon as the app icon. Without one, iOS takes a screenshot of the page — which looks terrible.

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Specifications:

• Size: 180x180 pixels (covers all current iPhones and iPads at all densities)
• Format: PNG only. No ICO, no SVG, no WebP.
• Corners: Apple automatically applies rounded corner masking. Design your icon to fill the full 180x180 square — don't pre-round the corners.
• Background: Don't use transparency. Apple replaces transparent regions with black, which usually looks wrong. Use a solid background color or your brand color.
• File location: While you can specify any path via the link tag, placing the file at /apple-touch-icon.png in the site root ensures it works even without the link tag (iOS checks this path automatically).

The 180x180 size covers iPhone (60x60 at 3x = 180x180) and iPad (83.5x83.5 at 2x = 167x167, downscaled from 180). Providing a single 180x180 file is sufficient — Apple downscales to smaller sizes as needed.

Web App Manifest Icons

The Web App Manifest (manifest.json or site.webmanifest) specifies icons for Progressive Web Apps and Android home screen shortcuts.

{"icons": [{"src": "/icon-192.png", "type": "image/png", "sizes": "192x192"}, {"src": "/icon-512.png", "type": "image/png", "sizes": "512x512"}]}

Required sizes:

• 192x192: Used for Android home screen icons and as the install prompt icon.
• 512x512: Used for the Android splash screen and as the high-resolution app icon.

Both should be PNG with a solid background (no transparency — Android may display transparent regions as black or apply its own background). Use "purpose": "any maskable" if your icon has sufficient padding (safe zone is the inner 80%) to survive Android's adaptive icon masking.

Maskable icons: Android's adaptive icon system applies different mask shapes (circle, squircle, rounded square) per device manufacturer. If your icon uses the full canvas edge-to-edge, important content may be cropped. Design with the important content within the inner 80% circle (the "safe zone") and mark the icon as "purpose": "maskable".

The Minimal Favicon Set You Actually Need

Here's the complete set for 2026, covering every browser and platform:

The HTML:

<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="/site.webmanifest">

That's it. Four link tags, 4-5 files. Everything else from those massive favicon generators (favicon-16x16.png, favicon-48x48.png, android-chrome-144x144.png, etc.) is redundant in 2026. Browsers either use the ICO multi-resolution file, the SVG, or the manifest icons.

A Brief History of favicon.ico

Microsoft Internet Explorer 5 (1999) introduced the favicon by checking for /favicon.ico at the site root. No HTML tag, no configuration — just drop a file there and IE would display it in the address bar. This convention stuck, and 27 years later browsers still make this request.

The <link rel="icon"> tag was added later to allow custom paths and multiple formats. But the /favicon.ico convention is hardcoded into browser behavior — removing support would break too many sites. Even in 2026, a bare /favicon.ico with no link tag works in every browser.

Favicons have grown from a 16x16 pixel decoration to a complex ecosystem of platform-specific icons, maskable variants, dark mode adaptations, and high-DPI versions. The four-file solution above is the result of years of that ecosystem settling down to what actually matters.

Generating Your Favicon Set

From SVG source (recommended):

1. Use the SVG directly as your SVG favicon (add dark mode CSS if applicable)
2. Convert SVG to ICO for favicon.ico (32x32, or multi-size)
3. Convert SVG to PNG at 180x180 for Apple Touch Icon
4. Convert SVG to PNG at 192x192 and 512x512 for the manifest

From PNG source:

1. Start with a 512x512 or larger PNG
2. Convert PNG to ICO for favicon.ico
3. Resize to 180x180 for Apple Touch Icon
4. Resize to 192x192 for the manifest
5. Keep the 512x512 for the manifest's large icon

If your logo is simple enough for SVG, start from SVG. The vector source produces crisper results at small sizes than downscaled raster, and you get dark mode support for free.

Favicon implementation in 2026 is simpler than it's ever been. Four files — ICO, SVG, Apple Touch Icon, and manifest icons — cover every browser and every platform. SVG favicons with dark mode support are the modern best practice, and the ICO fallback ensures nothing is left behind.

Generate your favicon set with ChangeThisFile: PNG to ICO, SVG to ICO, SVG to PNG for Apple Touch Icon and manifest icons. Start from SVG for the best results at all sizes.