Favicons in 2026 — Formats, Sizes and the Right HTML
Open a Yandex or Google
results page for any query and look at the left edge of the results. Beside each link sits a tiny site icon, and where it's missing the search engine draws a gray globe. Users decide what to click partly by that picture — which means a favicon does its real work outside the browser tab, where people barely notice it, and inside the most competitive place on the internet. From that follow both its requirement (legibility at 16 pixels) and the answer to how many files you need to prepare. Old guides demand thirty. Four are enough today, and here's why.
The modern minimum: favicon.ico (32×32, for old browsers and default requests), favicon.svg (scales anywhere and supports dark mode), apple‑touch‑icon.png (180×180, for iPhone and iPad) and a 192×192 PNG for Android. The other 26 files from decade‑old guides serve no purpose.
Where a favicon actually works
Three display scenarios differ in the cost of getting it wrong, so start with the most expensive one.
Search results. Both Yandex and Google place the icon next to the snippet, and on mobile beside every result. Blank space there costs clicks at the same ranking position.
Browser tabs. With twenty tabs open, titles shrink to two letters and users find the page they want by its icon.
Bookmarks and the phone home screen. A site saved to the home screen gets your icon — or a system placeholder if you never prepared one.
All three show the icon somewhere between 16 and 180 pixels. A single vector file covers that entire range, which is exactly why the thirty‑file set stopped being necessary.
The minimal file set
| File | Size | For whom |
|---|---|---|
| favicon.ico | 32×32 | old browsers, the default /favicon.ico request |
| favicon.svg | vector | modern browsers, dark mode |
| apple‑touch‑icon.png | 180×180 | iPhone/iPad, "Add to Home Screen" |
| icon‑192.png | 192×192 | Android, PWA manifest |
Three lines wire them up:
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">Still put favicon.ico in the site root even when it's linked via <link>: browsers, search bots and RSS readers go to /favicon.ico directly, bypassing the markup.
ICO itself stays in the set for historical reasons: the format can hold several sizes inside one file, and at one point only Internet Explorer read it. Packing the whole 16-to-256 range in there serves no purpose today: a modern browser takes the SVG, while a single 32×32 image remains the fallback for anything that skips the markup. Favicon generators still offer a multi‑size ICO out of inertia, and dropping it breaks nothing.
What an SVG favicon can do
Vector earned its place in this set through two abilities raster lacks.
The first is one file for every size: the browser renders it at 16 or 512 pixels, and separate copies per size become unnecessary. The second is reacting to dark mode, because a media query works right inside the file:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<style>
path { fill: #000; }
@media (prefers-color-scheme: dark) {
path { fill: #fff; }
}
</style>
<path d="..."/>
</svg>A black mark in a light‑theme tab, a white one in dark, one file for both cases. PNG can't pull off that trick, so raster copies remain only where vector still isn't read: old browsers, iOS and Android.
How to make a favicon from a logo
The files generate automatically, but the source has to be prepared by hand, and all four steps serve that 16-pixel size:
- Take the mark and leave the full logo aside. The text part turns into a gray smudge at 16 pixels. What goes into a favicon is an icon: a letter, a symbol, a simplified mark. Sber
's tab shows the check in a circle; the word "Sber" would never fit there. - Simplify. Drop fine details, thin lines and three‑color gradients. The check takes a second: shrink the icon to 16×16 and see whether it's still recognizable.
- Build a square composition. A favicon is square, and a horizontal logo compresses into a strip inside it. The mark should fill nearly the whole square with small margins.
- Export the set. From the SVG source produce the ICO (32×32) and two PNGs (180 and 192). Any favicon generator, Figma
or the command line handles this.
iOS rounds the corners of apple‑touch‑icon itself, so there's no need to do it yourself. It does need an opaque background though: iOS fills transparent areas with black, and the icon comes out unexpectedly grim.
What search engines won't forgive
Since the icon's main work happens in results, Yandex and Google have their own requirements for it, and they differ:
- Google takes one icon per domain, asks for a size that's a multiple of 48 pixels (48, 96, 144) or SVG, and may hide an icon it deems unsuitable — for instance one with tiny illegible content. It refreshes in results when the homepage is recrawled.
- Yandex supports SVG and large PNGs. On mobile the icon sits beside every result, so its contribution to click‑through is more visible here. You can speed up the refresh with a recrawl in Webmaster.
- Both systems filter out empty and white icons (they merge with the results background), default CMS placeholders (a stock WordPress favicon instantly signals an untouched site) and images unrelated to the topic.
Plan the refresh window in advance. Google redraws the icon after recrawling the homepage, which takes from several days to a couple of weeks on a small site; Yandex works on its own schedule, and the only way to hurry it is a recrawl in Webmaster. So the icon gets swapped together with the site release, so that the new one is already in results by the time traffic grows.
Hence the practical conclusion: a favicon belongs to the SEO toolkit alongside the snippet's title and description — a site with a recognizable icon collects more clicks at the same position.
Common mistakes
- A full‑color, detailed logo — it turns to noise at 16 pixels.
- Thirty files per a 2015 guide — msapplication tiles and icons for long‑dead devices clutter the site root and
<head>. - No
/favicon.icoin the root — some bots and services never read<link>tags. - A single 16×16 PNG for everything — you get mush on retina screens and in bookmarks, while search engines prefer larger icons.
Icons for PWA: manifest.json
If the site installs to the home screen as an app, the browser looks for icons in the manifest and skips <link> tags:
{
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
{ "src": "/icon-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
]
}The key entry here is the maskable icon: Android crops it to the launcher shape (circle, rounded square), so the mark must sit in the central safe zone (about 80% of the diameter) while the background fills the whole canvas. The logic matches adaptive icons for native apps, covered in the article on app icons. You can test your maskable icon at maskable.app.
How to confirm it all works
- Open the site in incognito: the favicon cache is stubborn, and a plain page refresh won't swap the icon.
- Request
https://your-site/favicon.icodirectly — the address should serve a file, while a 404 means it was never placed in the root. - Switch the system to dark appearance and look at the tab: a black mark with no media query merges into the dark browser chrome, and on a light background that mistake stays invisible.
- Add the site to an iPhone home screen and see the apple‑touch‑icon in action.
- Hold off on checking search results: engines re‑fetch icons on their own schedule, from several days to a couple of weeks.
Common questions
Can a favicon be animated? Some browsers support GIF favicons, but a blinking tab is irritating and search engines ignore animation. There's one legitimate case — swapping the favicon from JS to signal status: unread notifications, an ongoing call. Webmail clients do this.
Why doesn't the favicon update for visitors? The favicon cache survives an ordinary browser cache clear. Rename the file (favicon-v2.svg) and update the paths in <link> — that clears it for everyone at once.
Do subdomains need their own favicon? Yes: blog.site.ru and app.site.ru are separate sites to a browser and a search engine. Without their own icons they get globes.
Is an SVG favicon mandatory? The site works without one: an ICO plus a couple of PNGs cover every browser. SVG saves files and reacts to dark mode, so it gets added when a vector mark already exists. A logo that exists only as raster is not worth vectorizing for the favicon alone: 32×32 and 180×180 do the job.
What if the brand mark is illegible at 16 pixels? Make a separate simplified version for the favicon: a single letter, a fragment of the mark, or a simple shape in the brand color. Many brands do exactly this, and their favicon differs from the full logo.
The bottom line
A favicon lives in search results with competitors right beside it, so its only real requirement is recognizability at 16 pixels; everything else follows. That requirement shapes the source (the mark alone, drawn large and free of fine detail), and SVG's abilities shorten the file list to ico, svg and two pngs plus three lines in <head>.
It all starts with a vector mark: if you already have the logo's SVG, the favicon comes together in ten minutes. Vectors for almost any well‑known brand sit in our logo catalog — download the SVG, simplify it to the mark and assemble the set. And for a pet project that just needs a symbol, look into the emoji catalog.