Favicons in 2026 — Formats, Sizes and the Right HTML

A favicon is the fingernail‑sized icon every visitor sees: in the browser tab, in bookmarks, in history and — most importantly — in Yandex and Google search results next to your link. A site without one looks like a listing without a photo. Meanwhile the internet is full of outdated advice — "generate 30 files for every device". Spoiler: in 2026 you need four.

Why bother

• Browser tabs. With twenty tabs open, users find yours by icon, not text.
• Search results. Both Google and Yandex show favicons next to snippets. No icon — a gray globe takes its place, and CTR suffers.
• Bookmarks and phone home screens. A site saved to the home screen gets your icon — or an ugly placeholder.

The minimal file set

And the HTML that wires it 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">

Keep favicon.ico in the site root even with the <link> present — bots, RSS readers and older software still request /favicon.ico directly.

Why an SVG favicon is worth it

One file covers every size: the browser renders it at 16 or 512 pixels equally well. And an SVG favicon can adapt to dark mode — 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>

Black logo on a light tab, white on a dark one. Impossible with PNG.

Making a favicon from a logo

1. Use the mark, not the full logo. Text is unreadable at 16 pixels. You need an icon: a letter, a symbol, a simplified mark.
2. Simplify. Drop fine details, thin lines, three‑stop gradients. The test: shrink to 16×16 — is it still recognizable?
3. Make it square. A favicon is a square; a wide wordmark becomes a stripe in it. The mark should fill most of the square with small margins.
4. Export the set. From the SVG master, produce the ICO (32×32) and two PNGs (180 and 192) — any favicon generator, Figma or the command line will do.

Common mistakes

Verifying it works

1. Open the site in incognito — favicon caches are ferocious; a normal refresh won't update the icon.
2. Request https://your-site/favicon.ico directly — it must not 404.
3. Add the site to an iPhone home screen — you should see your apple‑touch‑icon.
4. Search results update on the engines' own schedule — expect days to a couple of weeks.

Favicons and search engines: Google's and Yandex's requirements

Search engines have their own preferences, and they differ:

• Google takes the favicon from the site root (one icon per domain), asks for sizes in multiples of 48 pixels (48, 96, 144) or SVG, and may refuse to show an icon it deems unsuitable — e.g. with tiny unreadable content. The icon refreshes when the homepage is recrawled.
• Yandex supports SVG favicons and large PNGs; on mobile results the icon sits next to every listing, so its CTR contribution is even more visible. A recrawl can be requested via Webmaster tools.
• Both engines dislike: empty/white icons (they merge with the results background), CMS placeholder icons (the default WordPress favicon screams template site) and topical mismatch.

The practical takeaway: a favicon is a click‑through factor in search — a direct SEO instrument. A site with a recognizable icon collects more clicks at the same position.

PWA and manifest.json: icons for "installing" the site

If your site can be added to the home screen as an app (PWA), the browser looks for icons in the manifest:

{
  "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 nuance is the maskable icon: Android crops it to the launcher's shape (circle, rounded square), so the mark must sit in the central safe zone (~80% of the diameter) with the background filling the whole canvas. It's the same adaptive‑icon logic as native apps (our app icon article). Test yours at maskable.app.

The fine points people ask about most

Can a favicon be animated? Some browsers technically support GIF favicons — don't. A blinking tab irritates, and search engines ignore animation. The one legitimate "animation" is swapping the favicon from JS as an indicator (unread counts, call status), as webmail clients do.

Why don't visitors see the new favicon? The favicon cache is the browser's most stubborn: it survives a regular cache clear. Rename the file (favicon‑v2.svg) and update the <link> paths — that reliably busts it for everyone.

Do subdomains need their own favicons? Yes — each subdomain (blog.site.com, app.site.com) is a separate site to browsers and search engines: give them icons too, or collect gray globes.

What if the brand mark is unreadable at 16 pixels? Make a dedicated simplified version for the favicon: one letter, a fragment of the mark, or just the brand color in a simple shape. Perfectly normal practice — many brands' favicons differ from their full logos.

In short

Four files — ico, svg, two pngs — plus three lines in <head>, and your site looks professional in tabs, bookmarks and search results. It all starts with a vector mark: with an SVG of your logo, the favicon takes ten minutes.

Vector marks for nearly any known brand live in our logo catalog — download the SVG, simplify to the mark, build the favicon. Need just a symbol or an emoji for a side project? Check the emoji catalog.