Blog

Favicon best practices: the definitive 2026 checklist

The complete 2026 favicon set is a multi-resolution favicon.ico (16/32/48), PNG 16 and 32, a 180 opaque Apple touch icon with no rounded corners, 192 and 512 PWA icons plus a maskable 512, and a linked web manifest with a theme-color. Keep the mark legible at 16px, declare the right head tags, make every source square, and verify in DevTools and Lighthouse.

By Nico Jaroszewski · 12 June 2026 · 9 min read

A complete, future-proof favicon setup in 2026 is a short, specific list: a multi-resolution favicon.ico holding 16, 32, and 48, PNG icons at 16 and 32, a 180 opaque Apple touch icon with no rounded corners, 192 and 512 PWA icons plus a maskable 512, a linked web manifest, and a theme-color meta tag. Keep the mark legible at 16px, declare the correct head tags, ensure every source is square, and verify it in DevTools and Lighthouse before you ship.

The files to ship

favicon.ico (16/32/48) at the site root - the universal fallback browsers request automatically.
PNG 16 and 32 - crisp tab and bookmark icons for modern browsers and high-DPI screens.
apple-touch-icon 180x180 - opaque, full-bleed, with no pre-rounded corners, because iOS applies its own mask.
PWA 192 and 512 with purpose: "any" - launcher, install prompt, and splash screens.
maskable 512 with purpose: "maskable" and a safe zone, so Android adaptive icons crop cleanly.
web manifest linked in the head, declaring the icons array, names, and colors.
theme-color meta tag matching the manifest theme_color.

The full breakdown of every dimension lives in our favicon sizes guide, and the manifest fields are covered in the web app manifest guide.

Google's size requirement

For the favicon to appear in Google search results, Google wants a square icon whose dimensions are a multiple of 48px - 48x48, 96x96, 144x144, and so on. Smaller icons are accepted, but supplying at least one square 48px multiple referenced from your homepage is the safe baseline. This is why packing 48 into your ICO and offering larger PNGs matters beyond just looking sharp.

Keep the mark simple and legible at 16px

A favicon is often rendered at 16x16 - fewer pixels than a single emoji. Fine detail, thin strokes, small text, and gradients turn to mush at that size. Use a single bold glyph, monogram, or simplified logo mark, test it at actual 16px on screen, and give it enough contrast against both light and dark tab strips. If your logo is busy, design a dedicated icon-only variant rather than shrinking the full lockup.

The correct head tags

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

The 192 and 512 PWA icons are declared in the manifest, not the head. For a copy-paste walkthrough including framework wiring, follow how to add a favicon.

Common mistakes to avoid

Renaming a PNG to .ico. ICO is an encoded container, not a renamed PNG - the file will be malformed and some clients reject it.
Non-square source images. Rectangular logos get padded or cropped unpredictably; always start from a square canvas.
A transparent Apple touch icon. iOS fills transparency with black; ship an opaque background.
Pre-rounding the Apple icon. iOS rounds it for you, so pre-rounded corners cause a double-clipped look.
Forgetting the manifest or mismatching its theme_color with the meta tag, which breaks PWA installs and toolbar tinting.
Aggressive caching. Browsers cache favicons hard; a stale icon can persist after an update. Use a fresh filename or a hashed query string when you change it.

How to verify it all works

Open each icon URL directly to confirm it returns 200 and the right image - including the root /favicon.ico.
In Chrome DevTools, check Application then Manifest: all icons load and the maskable preview is not clipped.
Run a Lighthouse audit and clear every favicon, manifest, and installability warning.
Test a real iOS "Add to Home Screen" and an Android install, and view the tab in both light and dark mode.

Ship a compliant set in seconds

Rather than assemble all of this by hand, drop one square logo into the Logo2Favicon generator. It outputs the multi-resolution ICO, every PNG size, the opaque Apple touch icon, the standard and maskable PWA icons, a ready web manifest, and the exact head snippet - all in your browser with nothing uploaded. Pair it with the favicon sizes guide to double-check each dimension before you go live.

Free forever, no sign-up

Generate your full icon set free

Drop one logo into the generator and download favicon.ico, every PNG size, the Apple touch icon, Android, PWA, and maskable icons, plus the manifest and HTML snippet - all in your browser, nothing uploaded.

Open the generator