The favicon is the tiny icon in a browser tab, a bookmark, and now the mobile search result, and while it is small, getting the favicon best practices right does real work for recognition and trust. A crisp, consistent favicon makes your tabs findable, your bookmarks memorable, and your listings more clickable on mobile, where Google shows a favicon beside the result. This guide covers the sizes you actually need, the formats to use, the HTML to add, and why it matters.
Why the favicon matters
A favicon is a small branding and usability asset with an outsized effect. In a row of open tabs, a distinct icon lets people find yours instantly. In bookmarks and history, it aids recognition. And on mobile search, Google displays your favicon next to your title and URL, so a clear, on-brand icon subtly improves how trustworthy and clickable your result looks. It will not move rankings by itself, but it strengthens brand recognition across every surface your site appears on.
The favicon sizes you need
Different contexts request different sizes, so a complete set covers browsers, Apple devices and progressive web apps.
| Size | Used for |
|---|---|
| 16×16 | Browser tab and address bar |
| 32×32 | Taskbar shortcuts and high-DPI tabs |
| 48×48 | Windows and some Google surfaces |
| 180×180 | Apple touch icon (iOS home screen) |
| 192×192 | Android and PWA manifest |
| 512×512 | PWA splash and app icon |
At minimum you want 16, 32 and 48 for browsers, 180 for Apple devices, and 192 plus 512 if you offer a web app manifest. Google recommends a favicon that is a multiple of 48×48 so it downscales cleanly.
ICO vs PNG vs SVG
Three formats are common, and modern sites usually mix them. The classic favicon.ico can hold several sizes in one file and has the widest legacy support, which is why placing one at your site root is still a safe baseline. PNG is sharp and easy to export at each size, and modern browsers accept PNG favicons directly. SVG favicons are resolution-independent and tiny, and are increasingly supported, with the bonus that they can adapt to dark mode. A robust setup is an SVG where supported, PNGs for specific sizes, and an ICO as the fallback.
The HTML you need
Reference your icons in the <head> so browsers and devices can find them. A typical modern set includes a standard icon link, an Apple touch icon, and a web manifest reference, for example <link rel="icon" href="/favicon.ico" sizes="any">, <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">, <link rel="apple-touch-icon" href="/apple-touch-icon.png">, and <link rel="manifest" href="/site.webmanifest">. The manifest then lists your 192 and 512 icons for Android and PWA use.
Design tips for a small canvas
A favicon is legible only if it is simple. At 16 pixels, fine detail and small text disappear, so use a bold, simple mark, often a single letter, monogram or symbol from your logo, with strong contrast and minimal detail. Test it at actual size against both light and dark tab backgrounds, and keep it consistent with your broader brand so recognition carries across your site, search results and social shares.
Common favicon mistakes
Most favicon problems are small but visible, which is exactly why they undermine the polish they are meant to add. The classic is a missing or broken favicon, where the browser shows a generic globe or blank icon because the file is absent, misnamed or 404ing at the path you referenced. Another is using a single large image scaled down by the browser, which turns crisp at 512 pixels into a muddy smear at 16, so you should export purpose-built small sizes rather than rely on downscaling. Detail is the third trap: logos with fine lines, gradients or small text that read well on a business card disappear in a tab, so a favicon usually needs a simplified mark rather than your full logo. Finally, people forget the Apple touch icon and web manifest, so the site looks unbranded when saved to a phone home screen. None of these are hard to fix; they just need a complete set and correct tags.
How Google uses your favicon
Since Google began showing favicons next to mobile search results, your icon has become a small but real part of your search presence. Google looks for a favicon that is a multiple of 48×48 pixels, associated with your homepage through a valid rel="icon" link, crawlable (not blocked in robots.txt), and reasonably stable over time. It also expects the icon to represent your brand rather than being generic or offensive, and it may choose not to display one that does not meet these bars. The practical implication is that a favicon is no longer just a browser nicety: on mobile, it sits right beside your title and URL, contributing to whether your result looks trustworthy at a glance. Getting it right is a cheap way to make every mobile listing a little more clickable.
Generate a complete set in one step
Exporting every size by hand and writing the tags is tedious and easy to get wrong. Upload one image to our free favicon generator and it produces the PNGs at every size, a ready site.webmanifest, and the exact <link> tags to paste into your head, all in your browser. It sits alongside the rest of our free SEO tools for cleaning up the on-page and technical basics.
Keeping your favicon consistent
One last habit that quietly pays off is consistency. Your favicon, social share image, app icon and logo should feel like the same brand, because people encounter them in quick succession, a tab here, a shared link there, a home-screen shortcut later, and consistency is what turns those glimpses into recognition. When you refresh a logo, refresh the favicon set at the same time, and re-check that the cached old icon has cleared (browsers cache favicons aggressively, so a hard refresh or a versioned filename helps). Treat the favicon as part of your brand system rather than an afterthought, keep the same simplified mark everywhere it appears, and it does its small job on every surface without you having to think about it again.
The bigger picture
A favicon is one of the cheapest brand touchpoints you have: a few minutes of setup that pays off in recognition on every tab, bookmark and mobile search result for years. Get the sizes and tags right once and forget about it. Then focus on the work that actually grows traffic, finding the right keywords, fixing technical issues and publishing content people and search engines value. SEO Rocket does exactly that on real Ahrefs data, in plain language. Free plan to start, paid plans from $49/month: app.seorocket.ai.
