Favicons and App Icons: What You Actually Need in 2026

Favicon guidance accumulated for two decades and most of it is now obsolete. You do not need 30 PNGs and a dozen link tags. Four files cover every current browser and platform.

The short list

1. An SVG favicon. One file, any size, sharp on every display:

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

Supported by every current browser. This is the primary icon.

2. A 32x32 PNG or ICO fallback. For older browsers and some feed readers:

<link rel="icon" href="/favicon.ico" sizes="32x32">

A file literally named favicon.ico at the site root is also fetched automatically without any tag, which is worth keeping for tools that assume it.

3. A 180x180 PNG for iOS. Safari does not use the SVG for home-screen bookmarks:

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

iOS applies its own rounded corners, so ship a square with the artwork inset — no pre-rounded corners, no transparency.

4. A web app manifest if the site is installable, referencing 192x192 and 512x512 PNGs, and including a 512x512 marked "purpose": "maskable".

That is the whole set. Everything else in legacy favicon checklists targets browsers that no longer ship.

Designing for 16 pixels

A favicon renders at 16x16 in a browser tab. That is fewer pixels than a single character of body text. Full logos do not survive it.

What works:

One shape, or one letter. Your monogram, not your wordmark.
High contrast against both tab-bar colors. Browsers have light and dark chrome, and a dark mark disappears in dark mode. Test both.
Thick strokes. A 1px stroke in a 512px design becomes invisible when scaled to 16px. Design at a small size and scale up, not the reverse.
No gradients or fine detail. Both turn to mush. Flat fill reads better.
Generous padding. Browsers add their own spacing; artwork that fills its box edge to edge looks cramped.

The practical test: export at 16x16, view it at 100% next to real tabs. If you cannot identify it in under a second, simplify.

Maskable icons

Android crops home-screen icons to whatever shape the launcher uses — circle, squircle, rounded square. A normal icon gets its corners cut off.

A maskable icon reserves a safe zone: all essential content inside the centered circle covering 80% of the width, with the outer 10% on each side treated as expendable bleed. The background must fill the entire canvas, not just the safe zone, or you get transparent corners after cropping.

Because the framing differs so much, a maskable icon is usually a separate export with a larger background and smaller mark — not the same file listed twice.

Dark mode

Two approaches:

One icon that works on both. Simplest and most robust. Use a shape with an opaque background so the tab-bar color never touches the mark.

An SVG that adapts. SVG favicons can contain a media query: @media (prefers-color-scheme: dark) { path { fill: white } }. Support is inconsistent — Chrome respects it, others may not — so treat it as an enhancement over an icon that already works.

Common mistakes

Only shipping a 16x16 PNG. Blurry on every high-DPI screen, which is most screens.
Transparent apple-touch-icon. iOS composites it onto black, so a dark mark vanishes.
Pre-rounded corners. The platform rounds it again, producing visible double-rounding.
Forgetting to update the cached file. Browsers cache favicons aggressively. Change the filename or add a query string when you update.
Referencing a file that does not exist. A 404 favicon shows the default globe. Verify the paths after deploy, not just locally.

Try it

Image Cropper — crop your mark to a clean 1:1 before exporting sizes
Format Converter — export PNG at each size you need
Contrast Checker — verify the mark against both light and dark tab-bar colors

Related reading: Transparency and Edge Quality explains why your icon's edges may fringe on dark chrome, and Aspect Ratio Cheat Sheet covers the 1:1 crop.