A favicon is the small square site icon a browser shows in the tab, in the bookmarks list, in history, and next to your title in Google mobile search results. Technically it is an image between 16×16 and 512×512 pixels in ICO, PNG or SVG format, placed in the site root and referenced from the head section with a link rel=icon tag.
The name comes from favorite icon: back in 1999 Internet Explorer 5 started showing a site icon in the Favourites list. It is now the only piece of your branding that survives when a tab is squeezed to twenty pixels and the title is down to two letters.
In plain terms
Picture a shelf of twenty identical white boxes. The favicon is the sticker that lets someone find their box without reading a label. In a browser with twenty tabs open the title is cut to a couple of characters, and the icon is the only recognisable thing left.
So the requirement is not that it looks beautiful, but that it reads at thumbnail size. Detail loses; contrast and one simple shape win.
Where people actually see it
- Browser tabs — the main place, and the more tabs someone keeps open, the more work the icon does.
- Bookmarks and history — in a list of dozens of rows the eye finds an icon faster than it reads a title.
- Google mobile results — Google shows the favicon to the left of the result title on phones. A snippet with a crisp icon reads as more solid than one with an empty circle, and that shows up in click-through rate.
- Phone home screens — the icon comes from apple-touch-icon on iOS or from the web manifest on Android.
- Messengers and readers — Telegram, Slack, RSS readers and bookmarking services pull the favicon for link previews.
Search results are the most underrated item on that list. You pay for SEO, push a page into the top five, and then sit beside a competitor whose branded mark is showing while yours is a grey globe.
Sizes and formats you need
One file for every case does not work: iOS ignores ICO, Android reads the icon from the manifest, and Google requires a side that is a multiple of 48 pixels. The working set looks like this:
| Size | Format | Where it is used | Required |
|---|---|---|---|
| 16×16 | ICO or PNG | Browser tab, history, bookmarks | Yes |
| 32×32 | ICO or PNG | Tabs on retina screens, Windows taskbar | Yes |
| 48×48 or a multiple | PNG or ICO in the root | Google mobile search results | Yes |
| 180×180 | PNG, apple-touch-icon | iPhone and iPad home screen | Yes |
| 192×192 | PNG in the web manifest | Android home screen, PWA | Yes |
| 512×512 | PNG in the web manifest | PWA splash screen, install prompt | Yes |
| Vector | SVG | Modern browsers, automatic dark-theme switching | Recommended |
The minimum viable kit in 2026: one favicon.ico holding both 16 and 32 px, apple-touch-icon.png at 180 px, and icon-192.png plus icon-512.png declared in the manifest. SVG is a bonus, not a replacement — older browsers will not take it.
Making one from your logo
The most common mistake is to take the finished logo and scale it to 32 pixels. A lockup with a company name, a strapline and hairline strokes becomes a grey smudge. Trends come and go — we covered a few in web design trends for 2026 — but the requirement to stay legible at 16 pixels has not moved since 1999.
- Take one element. A monogram, the first letter of the name, or the mark from the logo. Not the whole lockup with type.
- Strip the detail. Hairlines, gradients and shadows disappear or muddy the image at small sizes. Keep solid shapes and strong contrast.
- Check it at real size. Not in a mockup at 400 percent, but in a browser tab next to other sites. If you cannot recognise your own site in half a second, simplify further.
- Give it a background. An icon on an opaque brand-colour tile behaves predictably in both themes.
If there is no logo yet, a single letter in your brand colour on a solid tile does the job — clearly better than the default globe.
Dark and light browser themes
Browsers draw tabs on a light or dark background depending on the operating system theme. A black monogram on a transparent background looks perfect in light mode and vanishes in dark mode. Two solutions work: an opaque tile in your brand colour that holds up on any background, or an SVG favicon with a prefers-color-scheme media query inside the file, so the icon switches colour by itself. The reasoning mirrors the wider theme decision we covered in dark vs light website theme.
How to wire it up
The files sit in the site root and are referenced from the head of every page:
- link rel=icon href=/favicon.ico sizes=any — the base icon for all browsers;
- link rel=icon type=image/svg+xml href=/icon.svg — the vector version for modern browsers;
- link rel=apple-touch-icon href=/apple-touch-icon.png — the 180×180 icon for iOS;
- link rel=manifest href=/site.webmanifest — the manifest listing the 192 and 512 px icons for Android and PWA installs.
Keep favicon.ico in the root itself: browsers and Google's crawler request /favicon.ico directly even when no tag is present. After swapping an icon, do not assume it failed — favicons are cached aggressively and the old image can linger for weeks. Check in a private window.
Common mistakes
- 16×16 only. The icon blurs on high-density screens and fails Google's requirement for a size that is a multiple of 48.
- A transparent background under a dark mark. In a dark browser theme the icon disappears entirely.
- No apple-touch-icon. When someone adds the site to an iPhone home screen, iOS substitutes a shrunken screenshot of the page.
- The whole logo scaled down. Type and fine detail merge into an unreadable blob.
- An icon the crawler cannot reach. A file on a subdomain, blocked in robots.txt or returning an error means Google shows nothing.
- A redesign that skipped the icon. The site is new, but the root still holds a favicon from a five-year-old brand.
What it costs
We do not price favicons separately — the icon set is part of every build, whether that is a landing page, a corporate site or an online store. The designer prepares the icons while the layout is still being drawn, and the developer wires up the files and the manifest. It is part of shipping a site properly, not a line item. You can see what each package covers on our pricing page.
If your site is already live and only the icon is missing, it is half an hour under a support plan.
Favicons, meta tags and the other details that make a site recognisable in search are part of our SEO services.
