A favicon is the tiny icon that appears in browser tabs, bookmarks and, increasingly, in Google’s mobile search results. Knowing how to create a favicon properly, at all the sizes modern devices expect, is a small branding detail that punches above its weight. This guide covers why favicons matter, the sizes and formats you need, and the code to add them.
Why favicons matter
Favicons do more than decorate a tab. They help users find your site among a row of open tabs and a list of bookmarks, reinforcing your brand at a glance. Since Google began showing favicons next to results on mobile, they also affect how your listing looks in search, a clear, recognisable icon subtly boosts trust and click-through. And a missing favicon leaves a generic placeholder that makes a site feel unfinished. It is a low-effort, high-polish detail.
The sizes you actually need
“Just upload a favicon” used to mean a single 16×16 icon. Modern devices need a small set:
| Size | Used for |
|---|---|
| 16×16, 32×32 | Browser tabs and bookmarks |
| 180×180 | Apple touch icon (iOS home screen) |
| 192×192, 512×512 | Android and PWA icons (web manifest) |
| favicon.ico | Legacy fallback, often bundling 16 and 32 |
You start from one high-resolution square image and produce every size from it, rather than designing each by hand.
Design tips for a tiny canvas
A favicon has to read at 16 pixels, so simplicity wins. Use a bold, simple mark, a single letter, a symbol, or a stripped-down version of your logo, rather than a detailed full logo that turns to mush when shrunk. Favour high contrast so the icon stands out against both light and dark browser themes, and keep it square with a little breathing room around the edges. If your full logo is complex, create a simplified “mark” just for the favicon; most strong brands do exactly this.
The code to add a favicon
Once you have the images, you reference them in the page <head> with a few link tags, one for the standard icon, one for the Apple touch icon, and a link to a web manifest that lists the Android and PWA sizes. The manifest is a small JSON file that also lets your site be “installed” as a progressive web app. Getting all these references right by hand is fiddly, which is why generating the whole set together is the reliable approach.
Generate every size from one image
Rather than resizing and hand-coding each icon, generate them all at once. Our free favicon generator takes a single image, produces every size a modern browser and device needs, builds the web manifest, and gives you the exact HTML to paste into your <head>. Everything runs in your browser, so your image is never uploaded. That turns a fiddly, easy-to-get-wrong job into a two-minute task.
Favicons and dark mode
One detail modern designers miss: your favicon appears against different backgrounds. Browser tabs, bookmark bars and search results can be light or dark depending on the user’s theme, and an icon that looks crisp on white can vanish against a dark tab. The safest approach is a mark that works on both, high contrast, with a shape that does not rely on a white background to be visible. If your logo is a dark wordmark that disappears in dark mode, consider adding a subtle background or outline to the favicon version so it stays legible everywhere. Test the finished icon against both light and dark themes before you ship it.
Common favicon mistakes
A few issues come up repeatedly: uploading only a 16×16 icon and getting a blurry or missing icon on high-resolution and mobile devices; using a detailed logo that is illegible when shrunk; forgetting the Apple touch icon so iOS shows a screenshot instead of your brand; and caching, browsers hold onto favicons aggressively, so after updating one you may need a hard refresh or a cache clear to see the change. None are serious, but each undercuts the polish a favicon is meant to add.
The takeaway
A favicon is a small branding and trust signal that shows up in tabs, bookmarks and mobile search results, and doing it well means providing the full set of sizes from one simple, high-contrast image, plus the correct <head> code and a web manifest. Generate the whole set in seconds with the favicon generator, and explore the rest of our free SEO tools.