Favicon Design: From 16×16 to 512×512

A favicon is a tiny detail that nobody compliments and everybody notices when it is missing. The browser tab shows a sad gray square. The bookmark looks unfinished. The PWA install prompt uses a generic blob. All of this because someone forgot to upload a few files and add six lines to the HTML head.

The complication is that a modern favicon is not one file. It is a family — different sizes, different formats, different purposes, and each platform insisting on its own naming convention. This guide walks through every size you actually need in 2026, explains why each one exists, and shows you how to generate the whole set from a single source image without installing a thing.

Why there are so many sizes

A favicon is a raster image displayed at very small sizes on high-DPI displays, on dark backgrounds, in monochrome contexts, and as a launcher icon on mobile home screens. These contexts are different enough that a single image cannot look right everywhere. An icon that is crisp at 16 pixels has to be designed for 16 pixels — pixel-snapped, high-contrast, minimal detail. An icon that works as a 512-pixel PWA install image can afford gradients, fine detail, and depth.

Browsers and operating systems choose the size closest to the display context. If you only provide 16×16, iOS scales it up for the home screen and the result looks blurry. If you only provide 512×512, the browser tab downscales it and antialiasing destroys the detail. The only winning move is to supply the whole family and let each context pick.

Starting from a good source image

The ideal source is a square vector file (SVG) at least 1024×1024 pixels equivalent. That gives the downstream tooling enough detail to produce every target size with good antialiasing. If you only have a raster source, make sure it is at least 512×512 and has transparent background — scaling down is always better than scaling up.

Before you generate anything, crop to a tight square with a small margin. Favicons are centered in their display context and any extra whitespace becomes visible padding. Use Image Resizer to produce a clean 1024×1024 source with the right margin, and Image Cropper to trim precisely. If you need to remove a background, Background Remover handles that in-browser.

The classic favicon: ICO and 16/32

The original favicon.ico lives in the site root and remains a de facto standard. An ICO file is a multi-image container — you can pack multiple sizes inside one file, and the browser picks the best. For maximum compatibility, a modern favicon.ico contains 16×16, 32×32, and sometimes 48×48 variants.

Use PNG to ICO to convert a PNG source into an ICO file. Upload a high-resolution PNG and it produces a multi-size ICO suitable for the root of your site. Even if your primary icon is SVG (which modern browsers prefer), shipping a legacy favicon.ico at the root is still worth it — old bookmarks, RSS readers, and third-party tools that only know how to ask for /favicon.ico will get an answer.

For the individual PNG sizes, Image Compressor handles the downscaling with sensible quality. You want 16×16, 32×32, and 48×48 as individual PNGs — some browsers prefer to load them directly rather than unpack an ICO.

Apple touch icons

When a user saves a web page to the iOS home screen, Safari needs a dedicated icon. The spec has evolved over the years but the practical answer in 2026 is: provide a 180×180 PNG with transparent background (iOS will mask it into a rounded square) and reference it as apple-touch-icon.png.

The Apple Human Interface Guidelines, specifically the app icons section, lists the design principles — solid content, high contrast, no text smaller than the icon itself, no transparency in the main shape. Web developers historically ignored these and got away with it, but on modern Retina displays a sloppy touch icon sticks out.

You do not need to provide every historical size (57, 60, 72, 76, 114, 120, 144, 152, 180). Modern iOS downscales from 180 and the result is fine. Keep it simple: one 180×180 file.

Android and PWA manifest icons

Android and progressive web apps use the web app manifest (manifest.json or site.webmanifest) to describe icons. The manifest is a JSON document that lists icon files with their sizes and MIME types, and the OS picks the right one for each context.

Minimum icons for a modern PWA: 192×192 and 512×512. The 192 is used in launchers and notifications; the 512 is used for splash screens and the install prompt. Both should be PNG with transparent backgrounds. The Google PWA install criteria require these to meet the "installable" bar.

Here is a minimal site.webmanifest snippet:

{
  "name": "Your Site",
  "short_name": "Site",
  "icons": [
    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#000000",
  "background_color": "#ffffff",
  "display": "standalone"
}

For a "maskable" icon that fills the safe zone on Android's adaptive icon shapes, add a "purpose": "maskable" entry pointing at an icon designed with extra padding. You can keep the standard and maskable icons separate.

The SVG shortcut and its limits

Modern browsers support SVG favicons via <link rel="icon" type="image/svg+xml" href="/favicon.svg">. For simple logos, this is perfect — one file, crisp at every size, tiny download. The SVG even supports dark mode via @media (prefers-color-scheme: dark) inside the SVG itself, letting you swap colors automatically when the browser theme changes.

The limit is that SVG favicons do not replace the whole family. iOS Safari and many bookmarking services still require raster fallbacks. Ship the SVG for modern browser tabs and the PNG/ICO set for everything else. Reference both — browsers that understand SVG will use it, others will fall back.

If you need to convert a raster logo into clean SVG, SVG Optimizer minifies existing SVG files, and for path inspection, opening the SVG in a text editor is usually enough. For color-theming the SVG by hand, Color Picker gives you the exact hex values your brand palette needs, and Image to Base64 lets you inline a tiny PNG fallback directly into a data URL when you want a single-file favicon reference.

What to put in the HTML head

Here is the minimal set of tags for full cross-platform coverage in 2026:

<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#000000">

Five link tags, one meta, and a manifest file. That covers browser tabs, bookmarks, iOS home screen, Android PWA install, and the browser chrome color on mobile. Do not add more unless you have a specific compatibility need — the old "thirty-tag favicon" advice from 2015 is no longer necessary and just bloats the head.

For the single-source-of-truth workflow, use Favicon Generator, upload your square source image, and it produces the full set in one go: ICO, PNGs at every required size, apple-touch-icon, manifest snippet, and the HTML head tags. Copy-paste into your project and you are done.

Testing across platforms

Test in four places: a desktop browser tab, a dark theme tab, an iOS home screen, and an Android install prompt. Each of these renders your icon differently and each can surface a bug the others hide. The browser tab catches low-res issues. Dark theme catches contrast issues. iOS home screen catches the masking behavior. Android install prompt catches sizing issues with the maskable icon.

If you cannot test on real devices, use the device simulators in Chrome and Safari DevTools. They are not perfect but catch 90% of issues. For a final sanity check, Google's Lighthouse PWA audit flags missing or mis-sized icons directly.

Related pillar guide

This cluster sits under our image pillar. For the broader workflow — formats, compression, responsive images, LCP, and the full modern image pipeline — see Image Optimization: The Complete Guide.

FAQ

Do I still need favicon.ico if I have an SVG?

Yes, at least as a fallback at the site root. Old tools and bookmarking services look for /favicon.ico directly and do not parse your HTML head. A multi-image ICO containing 16 and 32 pixel variants covers those cases. Modern browsers will prefer the SVG once they see the link tag.

What size should my source image be?

1024×1024 PNG minimum, or a square SVG. Larger than 1024 does not help because the downstream sizes are all smaller. Smaller than 512 starts producing blurry downscales for the 512 PWA icon.

Does Google use the favicon in search results?

Yes. Mobile search results show the site favicon next to each entry. Google recommends at least 48×48 and ideally multiples of 48 (48, 96, 144, 192) per their favicon search documentation. Providing 192×192 covers this automatically.

How do I make a dark-mode-aware SVG favicon?

Inline a <style> block inside the SVG with @media (prefers-color-scheme: dark) and swap fill colors. Modern browsers re-evaluate the media query as the system theme changes, and your tab icon updates live. Not all browsers support this yet, so keep the default light-mode colors readable on both backgrounds as a fallback.

Should my favicon match my logo exactly?

Not exactly. A logo designed for print or a header is usually too detailed for 16 pixels. Simplify: reduce strokes to two or three, bump contrast, remove text, keep the most recognizable shape. Think of it as a silhouette version of your logo. Major brands do this — look at any well-known site's favicon next to its full logo and you will see the simplification.

Closing thought

Favicons are a 30-minute job that nobody will remember if you do it right. The only wrong moves are skipping it entirely or overdoing the HTML head with obsolete tags from a 2014 blog post. Generate the full set from a single clean source, ship five link tags and a manifest, test on a phone, and move on. The tab icon is the first visual a user sees from your site — make it crisp.