Favicon Fundamentals
Start here if you want the ground truth rather than a copy-pasted snippet.
A favicon stopped being one file a long time ago. Today it's a small family of assets — a multi-resolution .ico for legacy fallback, PNGs at 16, 32 and 180 pixels, manifest icons at 192 and 512, and increasingly an SVG that scales to all of them. Each one is read by a different consumer: browser tabs, iOS home screens, Android launchers, search results, RSS readers. These guides cover what each file is for, which sizes genuinely still matter in 2026, and the precedence rules browsers use when a page declares several icons at once.
I Audited the Favicons of 101 Popular Websites. Most Got a C.
Original data from 101 major sites: only 16% ship an SVG favicon, 30% have a web manifest, 15 serve a PNG renamed favicon.ico, and 13 return a 404 for /favicon.ico. Full results and dataset.
12 min read
ReadFundamentalsMaskable Icons Explained: Why Your PWA Icon Gets Cropped on Android
What the maskable purpose in a web app manifest actually does, how big the safe zone is, and how to ship maskable and standard icons without one ruining the other.
6 min read
ReadFundamentalsThe Legacy Favicon Tags You Can Finally Delete (And the Four You Can't)
Most favicon snippets on the web still carry a decade of dead tags: mask-icon, browserconfig.xml, msapplication-*, precomposed icons. Here's what each one did and which are still doing work.
6 min read
ReadFundamentalsHow Browsers Actually Decide Which Favicon to Show
Declare five icons and the browser displays one. The selection rules aren't the order you wrote them in — here's what governs the choice, and why two sites with identical markup can show different icons.
7 min read
ReadFundamentalsThe Web App Manifest, Explained: Icons, Theme Color and PWA Installs
What site.webmanifest actually does, which fields matter for icons, and how to get it right.
5 min read
ReadFundamentalsThe History of the Favicon: From Internet Explorer 5 to PWAs
How a 16-pixel Microsoft afterthought in 1999 became one of the most-requested files on the web.
5 min read
ReadFundamentalsFavicon vs Apple Touch Icon vs App Icon: What's the Difference?
A favicon is the 16–32px tab icon, the Apple touch icon is the 180×180 opaque PNG iOS uses for home-screen shortcuts, and the app icon comes from your web manifest. What each needs and the tags to add.
5 min read
ReadFundamentalsThe Complete Favicon Size Guide for 2026 (16px to 512px)
Every favicon size a modern site actually needs, what each one is for, and which file to export it as.
4 min read
ReadFundamentalsDo You Still Need a favicon.ico File in 2026?
Yes, but not for the reason most guides give. Browsers use /favicon.ico only as a fallback, while feed readers, link previews and crawlers still look there first. What to put in it and how small it can be.
4 min read
ReadFundamentalsFavicon Format: PNG vs ICO vs SVG — Which Should You Use?
Which file format should a favicon be? Use PNG for the sized icons, a multi-size favicon.ico (16, 32, 48px) at the site root, and an optional SVG — here is what each format does and the exact tags to ship.
4 min read
Read