What Is a Favicon? Sizes and Best Practices
Published 2026-05-12
It is the smallest piece of branding on your entire website, but its absence is instantly noticeable. The favicon — that tiny icon in the browser tab — signals whether a site is polished or unfinished. This guide explains what favicons are, which sizes you actually need in 2026, and how to set them up correctly.
What a favicon is
"Favicon" is short for "favorite icon," a name dating back to when browsers showed it next to bookmarked ("favorite") sites. Today it appears in many places: the browser tab, the bookmarks bar, browser history, the address-bar suggestions, and — in larger forms — on phone home screens when someone saves your site, and in search results on mobile.
Why one file is no longer enough
In the early web, a favicon was a single 16×16 pixel favicon.ico file. That is no longer sufficient, because the icon now needs to look good at many sizes across many devices — from a tiny tab icon to a large home-screen icon on a high-resolution phone. A modern favicon is really a small set of images.
The sizes you need
You do not need dozens of sizes — a focused modern set covers virtually every device:
- 16×16 and 32×32 — the classic browser-tab and bookmark icons.
- 180×180 — the "apple-touch-icon," shown when someone adds your site to an iPhone or iPad home screen.
- 192×192 and 512×512 — used by Android and by Progressive Web Apps when installed.
A favicon.ico at the site root is still worth including as a harmless fallback, because some tools request that path by convention.
How to add them to your site
Place the icon files at your site root and reference them in the <head>:
<link rel="icon" type="image/png" sizes="32x32"
href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16"
href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180"
href="/apple-touch-icon.png">Design tips for tiny icons
A favicon is an exercise in extreme simplification. Detail that looks great on a logo disappears at 16 pixels — thin lines vanish, text turns to noise, gradients become mud. The rules:
- One bold shape. A single recognizable symbol works far better than a full logo.
- High contrast. The icon must stand out against both light and dark browser themes.
- Few colors. Two or three at most.
- Test at actual size. Always preview at 16×16, not zoomed in — what looks good large can be illegible small.
Generating the full set
Creating every size by hand is tedious. The generator below takes one square image and produces the complete favicon set, along with the HTML link tags to paste into your <head> — all processed in your browser. Start with a simple, high-contrast square design for the best results at small sizes.