Which favicon sizes and formats you actually need in 2026 — ICO, PNG, SVG, Apple touch icon — with a ready checklist.
You don't need a dozen favicon files anymore — a modern set is roughly: a 32×32 ICO, an SVG, a 180×180 Apple touch icon, and 192/512px PNGs for Android/PWA. Here's exactly what each one is for, why the list has actually gotten shorter over time, and the code to add them correctly.
Who Needs This Level of Detail
Most site owners never need to think about favicon sizes and formats beyond running an image through a generator once — this guide is most useful for developers implementing a favicon manually without a generator, designers preparing source files for a brand system, or anyone troubleshooting why a favicon looks fine on desktop but breaks on a specific device or browser. If you just want the fastest correct result with no manual file management, jump straight to the generator linked at the end of this guide rather than working through every size and format decision by hand.
The Modern Favicon Set ⚠️CHECK
| File | Size | Purpose |
|---|---|---|
| favicon.ico | 16/32/48 (multi-size) | Browser tab, legacy support, address bar |
| icon.svg | Scalable | Modern browsers (crisp at any size) |
| apple-touch-icon.png | 180×180 | iOS home screen |
| icon-192.png | 192×192 | Android / PWA |
| icon-512.png | 512×512 | PWA splash screen / install prompt |
Why the Favicon Set Used to Be Much Longer
Older favicon guidance recommended a sprawling set of a dozen or more individual PNG files at every conceivable size, largely to accommodate a wide range of older browsers and devices with inconsistent support for scaling a single file cleanly. Modern browsers have converged on much better default handling — a single well-formed ICO can cover legacy needs, and SVG's inherent scalability covers modern browsers at any resolution without needing a separate file per size. The result is a genuinely shorter, more maintainable list today than what was considered best practice even a few years ago. ⚠️CHECK current browser support specifics before assuming the shortest possible list is safe for your specific audience, particularly if you need to support notably older browser versions.
Formats Explained
- ICO — the original, classic favicon format, notable for being able to hold multiple sizes bundled within a single file. Still worth keeping specifically for legacy browser support and the address bar, even though it's the least modern of the three formats.
- PNG — a sharp, reliable raster format used for the larger touch and app icons (Apple touch icon, Android/PWA icons), where a fixed, high-quality single size is what's actually needed rather than infinite scalability.
- SVG — a scalable vector format, tiny in file size and perfectly crisp at any resolution, making it ideal for the standard browser tab icon on any modern browser that supports it. It can also support light/dark theme variants within a single file in more advanced setups. ⚠️CHECK current SVG favicon browser support before relying on it as your only format, since a small number of older browsers still require the ICO fallback.
Why Multiple Sizes Exist Instead of One Universal File
It's reasonable to wonder why a single sufficiently large image can't simply be scaled down automatically for every use case, removing the need for several distinct files. In practice, different contexts have different rendering requirements: a browser tab needs a tiny, instantly-loading file with minimal overhead; an iOS home-screen icon needs a specific fixed size iOS expects exactly, with its own corner-rounding and shadow effects applied by the operating system itself; and a PWA splash screen needs a larger, high-resolution file for a moment where visual quality genuinely matters more than file size. Rather than relying on a single file to gracefully handle every one of these different constraints simultaneously, the multi-file approach lets each context use a file genuinely optimized for its specific requirements.
Apple Touch Icon, Android, and PWA Icons in Detail
The Apple touch icon (180×180px) is what displays when someone saves your site to an iOS home screen — without one, iOS falls back to a screenshot-based icon that looks noticeably less polished and less like a real installed app. Android and PWA icons (192×192 and 512×512px) serve a similar purpose on Android devices and for Progressive Web Apps specifically, with the larger 512px version additionally used for a PWA's splash screen when the app is launched. These are referenced through a web manifest file (site.webmanifest), a small JSON configuration that tells the operating system which icon files to use for which specific purpose.
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">
This four-line set covers the standard browser tab icon (with an ICO fallback for older browsers), the iOS home-screen icon, and — through the manifest reference — the Android and PWA icon sizes as well, without needing to individually declare every single size as its own separate tag.
Design Considerations at Each Size
At 16×16 pixels (the smallest common favicon size), there's almost no room for detail at all — use a simple mark, a single letter, or a bold geometric symbol, never a full logo with text, which becomes entirely illegible at this scale. At 32×32 and above, slightly more detail becomes viable, though the same principle of simplicity still applies far more than it would for a full-size logo. At 180×180 and larger (the Apple touch icon and Android/PWA sizes), there's genuinely more room to work with, which is why some brands use a slightly more detailed version of their mark specifically for these larger icon sizes while keeping the tiny browser-tab favicon intentionally minimal.
Why Fewer Files Is Actually Better Design, Not Just Convenience
It's tempting to think a longer list of favicon files signals more thoroughness, but the shorter modern set isn't a shortcut — it reflects genuinely better browser capabilities that make several older files redundant. Serving files nobody's browser actually needs anymore adds unnecessary page weight and maintenance burden (more files to regenerate every time your branding changes) without any real compatibility benefit. The right mental model is covering every genuinely distinct use case — standard tab, iOS home screen, Android/PWA — rather than covering every conceivable historical file size regardless of whether current browsers still need it.
File Size and Performance Considerations
Favicon files are small by nature, but at scale — a high-traffic site serving millions of page views — even a small file adds up in aggregate bandwidth, and an unnecessarily bloated favicon (an oversized PNG, an overly complex SVG) is pure waste relative to a properly optimized one serving the identical visual result. Run your exported favicon files through a general image optimization pass the same way you would any other site asset, and prefer SVG's inherent efficiency over a needlessly large PNG wherever browser support allows it.
Should You Use Light and Dark Variants?
Some modern setups support serving a different favicon depending on whether a visitor's browser or system is in light or dark mode, typically implemented through an SVG with embedded media queries or through multiple <link> tags with a media attribute distinguishing light from dark preference. This is a genuinely nice, polished touch — a favicon that stays visible and legible regardless of the browser's theme — but it's an enhancement, not a requirement; a single, well-designed favicon that works reasonably well against both light and dark tab backgrounds is a perfectly acceptable default for most sites. ⚠️CHECK current browser support for media-query-based favicon switching before building a setup that depends on it working universally.
Choosing a Format When You're Not Sure
If you're unsure which format to prioritize for your specific situation, default to generating the full modern set (ICO, SVG, and the PNG touch/PWA icons) rather than trying to guess which single format your audience needs — the marginal cost of including all of them is minimal, while the cost of guessing wrong and missing a format some portion of your visitors actually needs is a genuinely broken experience for exactly that portion of your audience.
Favicons for Multi-Brand or Franchise Websites
If you manage several distinct sites under different sub-brands or franchise locations, keep each one's favicon set generated from that specific sub-brand's own mark rather than reusing a single parent-company favicon everywhere. This mirrors the same reasoning covered for multi-tenant setups elsewhere — a shared favicon across visually distinct sites undermines the exact tab-recognition benefit the format exists to provide, especially for a user who might reasonably have several of your different locations' or sub-brands' sites open simultaneously while comparing them.
Favicon Formats for Different Design Sources
If your source image is a simple, geometric mark or a single letterform, generating directly to SVG preserves perfect sharpness at every size with minimal file weight. If your source is a photographic image or a highly detailed illustration, PNG is the more reliable choice for the larger touch-icon sizes, since SVG isn't well suited to representing photographic detail efficiently the way it is for clean vector shapes. Most favicon generators, including ours, handle this conversion automatically regardless of your source format, but understanding which underlying format actually suits your specific mark helps you sanity-check the generated output rather than assuming every source image converts equally well to every target format.
How Favicon Sizes Interact With Retina and High-DPI Displays
High-density ("Retina" or similar) displays render more physical pixels within the same visual space, meaning a favicon sized for a standard-density screen can look slightly soft or under-detailed on a high-DPI display if the browser has to upscale it. Serving an SVG sidesteps this entirely, since vector graphics scale perfectly to any pixel density with no upscaling artifacts at all — one more practical reason SVG has become the preferred modern format for the standard browser tab icon specifically, beyond just its small file size.
A Practical Checklist Before You Ship
-
favicon.icoat minimum 32×32, ideally multi-size within the file -
icon.svgfor crisp display on modern browsers -
apple-touch-icon.pngat 180×180 for iOS home-screen saves -
icon-192.pngandicon-512.pngfor Android and PWA use - A
site.webmanifestfile correctly referencing the Android/PWA icons - All four
<link>tags present and correctly pathed in your HTML<head> - Tested in at least two different browsers, and on an actual mobile device if home-screen saving matters for your site
How This Set Compares to Older Favicon Guidance
Favicon guidance from several years ago commonly recommended a much longer list — separate 16×16, 24×24, 32×32, 48×48, 64×64, and 96×96 PNGs individually, on top of the ICO and touch icons, to accommodate a wider range of older browsers and platform-specific quirks that have since become far less relevant. If you're maintaining an older site built against that earlier guidance, it's not broken by any means, but it's worth knowing the current shorter set is the more maintainable modern target — you can safely retire the extra intermediate PNG sizes once you've confirmed your current browser support requirements don't specifically call for them.
Testing Your Favicon Set Thoroughly
Beyond a quick visual check in one browser, a thorough test of a complete favicon set covers: the standard tab icon in at least two different desktop browsers, the Apple touch icon by actually saving the site to an iOS home screen, the Android/PWA icon by saving to an Android home screen if your audience includes Android users, and — if you've implemented light/dark variants — checking both browser theme settings explicitly rather than assuming one theme's correct appearance guarantees the other's. This thoroughness matters most for a business-critical site where a broken icon reflects on brand credibility, and matters less for a low-traffic personal project where a quick single-browser check is a reasonable trade-off against the time cost of exhaustive testing.
Common Mistakes With Favicon Files
Using only a single PNG for everything — technically works in some modern browsers, but skips the legacy ICO fallback and the dedicated touch-icon sizes, leaving mobile home-screen saves and older browsers with a degraded or missing result. Exporting SVG icons with excessive complexity — a favicon SVG should still be simple enough to read at tiny sizes; embedding a highly detailed vector illustration defeats the purpose, even though SVG technically supports arbitrary complexity. Forgetting the manifest file — without a correctly configured site.webmanifest, Android and PWA icons may not display correctly even if the actual PNG files are present and correctly sized. Never testing on an actual mobile device — desktop browser testing alone won't reveal whether your Apple touch icon or Android icon actually displays correctly when someone saves your site to their home screen.
Generate the Whole Set at Once
Rather than manually creating and resizing each file individually, the favicon generator outputs every size in this guide, plus the exact HTML to add them, from a single source image or even just a letter — then see how to add a favicon for the complete platform-by-platform installation steps once your files are ready.
Frequently Asked Questions
What favicon sizes do I need?
At minimum a 32×32 ICO, plus a 180px Apple touch icon and 192/512px Android/PWA icons; an SVG is a strong addition for crisp display on modern browsers, though not strictly required if you're prioritizing the shortest possible file list.
Is ICO or PNG better for favicons?
Neither replaces the other — keep an ICO for legacy browser tab support, and use PNG for the larger app and touch icon sizes. Most sites ship both rather than choosing one exclusively.
What is the Apple touch icon size?
180×180 pixels — this is the size iOS expects specifically for home-screen saved icons, distinct from the smaller standard browser tab favicon.
Do I need a separate icon for Android and PWA use?
Yes — 192×192 and 512×512px PNGs, referenced through a web manifest file, cover Android home-screen icons and PWA splash-screen display respectively.
Can I use just one SVG file and skip everything else?
Not safely for full compatibility — while SVG covers modern browsers elegantly, keeping an ICO fallback and the dedicated touch-icon sizes ensures older browsers and mobile home-screen saves still work correctly.
Should my favicon look different in light mode vs dark mode?
It can, as a polish enhancement using SVG media queries or multiple linked files, but it's not required — a single favicon designed to read clearly against both light and dark tab backgrounds is a perfectly reasonable default.
Should I generate the full set even if I'm not sure I need every file?
Yes — the cost of including the full modern set is minimal, while guessing wrong and omitting a format some visitors actually need creates a genuinely broken experience for that portion of your audience.
Does a favicon look different on a high-resolution (Retina) display?
A raster PNG can look slightly softer on a high-DPI screen if the browser has to upscale it. SVG avoids this entirely, since vector graphics scale perfectly to any pixel density with no upscaling artifacts.
How do I know if my current favicon setup is missing something?
Check it against the practical checklist above — confirm each required file exists, is correctly sized, and is referenced in your HTML, then test in more than one browser and on an actual mobile device.
Need a site built right, down to the favicon? Talk to Scult.
