The state of the favicon in 2026: what to ship

September 13, 2026 · 12 min read

Every few years, favicon advice seems to get longer. A new phone adds a size, a new browser adds a format, and the checklist you copied from a tutorial quietly grows to twenty files — most of which no current device will ever request.

2026 is, refreshingly, the opposite story. No new favicon format has arrived to replace the old ones, and no major platform has added a must-have size. Instead, browsers have converged on a short, stable stack: one SVG that can adapt to dark mode, a handful of PNGs for the places SVG does not reach, and an ICO at the site root for the places HTML does not reach. The work has moved from collecting files to designing one icon that survives a dark tab bar, a Google result, an iPhone home screen and an Android shape mask.

This is our annual snapshot: the package we recommend shipping in 2026, why each file in it earns its place, and what you can finally delete.

Updated for Safari 26 (November 2026): Safari 26's new SVG favicon support — and Google's current raster-only guidance — are now reflected in the package rationale below; the five-file package itself is unchanged.

The 2026 favicon package, on one page

Declared in the <head>, that package is:

<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="shortcut icon" href="/favicon.ico" sizes="32x32" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />

If that looks familiar, that is the point. The filenames and sizes have barely moved in several years. What has changed is which file does the leading work — and what good looks like inside it.

What actually changed

1. SVG became the main icon, not an optional extra

For most of the favicon's history, the ICO was the icon and everything else was a supplement. That order has flipped on the desktop. Where a browser supports an SVG favicon, a well-made favicon.svg is the sharpest choice: one small, self-contained file that renders cleanly at tab size, on high-density displays and at the larger sizes browsers occasionally use for bookmarks, histories and shortcuts.

SVG is also the only format that can solve the defining favicon problem of the dark-mode era. A @media (prefers-color-scheme: dark) rule inside the SVG can change its colours with the visitor's system or browser theme, so a dark logo does not vanish on a dark tab bar. PNG and ICO cannot do this — each is one fixed picture for every theme. Our guide to SVG favicons and dark mode shows the setup, including why the icon follows the operating system theme rather than a light/dark toggle on your own page.

Two limits keep SVG from being the only file. First, support is still not universal: Safari only added SVG favicons in version 26 (September 2025), so Safari 18 and earlier still rely on PNG and ICO for tab icons, and Google Search does not list SVG among its supported formats. An SVG-only site leaves both to improvise. Even in Safari 26 the dark-mode prefers-color-scheme switch inside an SVG favicon is not applied yet. Second, an SVG favicon is loaded as an image, in isolation — scripts do not run and external fonts or images are not fetched. Convert text to outlines and embed everything the artwork needs, or the browser will render what is missing as nothing at all.

2. Dark mode turned the fallback icon into a design problem

The raster files in the package cannot switch themes, so they now have a clearer job: be the one version of your mark that works on any background. A transparent, dark-blue logo may be elegant on a white page and unreadable in a dark search result. In practice, that usually means giving the PNG, ICO and touch icons a deliberate background and enough margin, then letting the SVG carry the refined light and dark variants on top.

It is also worth checking the real sizes rather than the master artwork. Favicons are judged at 16 pixels in a crowded tab bar, not at 512 pixels in a design tool. Simplify before you shrink: one bold silhouette, open counters, no fine lettering, and no detail you would miss if it disappeared — because at 16x16, it will.

3. Google settled the raster question at 96x96

Google displays a favicon beside your site name in search results, and its requirements explain the one desktop PNG in the package. Google asks for a square image of at least 8x8 pixels, recommends one larger than 48x48, and lists BMP, GIF, ICO, PNG, JPEG, PPM and TIFF as supported formats — SVG is not on that list. The icon must be declared with a rel="icon" link and be crawlable rather than blocked to its crawler. (The older “multiple of 48 pixels, or SVG” wording was replaced in Google’s documentation in 2024, and an August 2026 update spelled out the supported formats; Google says the set of supported formats itself did not change, so treat SVG as unreliable in search results.)

A single favicon-96x96.png meets that guidance and doubles as the fallback for browsers without SVG favicon support. You do not need to export several sizes as separate files; one good size is enough for Google to scale. Two expectations are worth setting: a favicon is presentation, not a ranking shortcut, so a better icon will not by itself move you up the results — and Google refreshes favicons on its own crawling schedule, over days, so a correct new icon may not appear in search the hour you deploy it.

4. Home screens split cleanly in two: Apple and the manifest

Neither iOS nor Android uses your tab icon for a home-screen shortcut, and in 2026 they each want exactly one thing.

Apple wants one opaque 180x180 PNG. The long historical lists — 57, 76, 120, 152, 167 pixels for successive devices — are obsolete; iOS scales the 180x180 file down where it needs less. What still matters is treatment: iOS fills transparency with black and applies its own corner mask, so ship a full-bleed, opaque square with its own chosen background, no pre-rounded corners and no added shadow. Our Apple touch icon guide covers the details.

Android and Chromium want manifest icons. The 192x192 and 512x512 PNGs are declared in site.webmanifest, not with <link rel="icon">:

{
  "name": "Your site",
  "short_name": "Your site",
  "icons": [
    { "src": "/web-app-manifest-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
    { "src": "/web-app-manifest-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

The Android-specific risk is shape: launchers crop home-screen icons into circles, squircles and other masks. An icon declared maskable promises it can survive that crop, so keep the essential artwork inside the central safe zone — roughly a circle 80% of the image's width — and let the background colour fill the edge. You do not need a fully installable progressive web app for these icons to be useful, but note the reverse, too: linking a manifest on its own does not make a site installable. It simply gives Android a proper icon when a shortcut is created. Our guide to manifest and maskable icons walks through the previews worth checking.

5. The ICO quietly refused to retire

It is tempting to declare the ICO — a container format older than some of the developers shipping it — finished. It is not, for one structural reason: not everything that needs your icon can read your HTML. Open a PDF or a standalone image on your domain and there is no <head> to consult, so the browser falls back on the long-standing convention of requesting /favicon.ico from the site root. Some older crawlers, feed readers and tools do the same.

So the ICO's job in 2026 is narrow and worth doing well: one small file at the root, bundling 16x16, 32x32 and 48x48 renderings. Leave out the 256x256 layer some tools offer — nothing displays a browser favicon at that size, and it only makes every download of the bundle heavier.

What you can retire

• Windows Metro tiles. browserconfig.xml and the mstile images belonged to Windows 8 tiles. Microsoft ended Windows 8 support in 2023 and Edge does not read the file. See why Metro and Touch Bar icons were discontinued.
• The Safari mask icon as a default. The monochrome rel="mask-icon" was tied to Safari pinned tabs (Safari 12 and later use the regular favicon instead) and the MacBook Touch Bar era; Apple removed the Touch Bar from its MacBook Pros in 2021 and discontinued the last Touch Bar model in 2023. It is an opt-in extra for a specific audience now, not part of a standard package.
• A dozen Apple touch icon sizes. One 180x180 file replaces the 57-through-167 list; iOS does the scaling.
• A PNG at every power of two. 16, 32, 48, 64, 128… browsers scale a close source cleanly. Between the SVG, the 96x96 PNG and the sizes inside the ICO, desktop is covered.
• Novelty formats as your favicon. WebP and AVIF have not become favicon formats in practice, and animated favicons are patchily supported and mostly a distraction in a tab bar. The boring trio — SVG, PNG, ICO — is what browsers, search engines and home screens reliably consume.

None of this makes the old files harmful if they already exist and are correct. It means they should be deliberate exceptions — an old intranet, a kiosk, a known legacy audience — rather than lines you copy into every new project. If you maintain a site that genuinely needs one, generators still tend to offer them as legacy options; ours does, off by default.

What has not changed at all

The 16-pixel test is still the whole craft. Every format argument above is secondary to whether a stranger can recognise your mark, at favicon size, in a row of twenty other tabs. Test the light version, the dark version and the home-screen version at the size each will actually be shown.

Caching is still the first suspect. Favicons are cached more aggressively than almost any other asset, sometimes for weeks. When a new icon "does nothing", hard-refresh the icon file itself, open it directly in a tab, or ship it with a new filename or a version such as ?v=2 before you conclude the markup is wrong.

Everything still starts from one good master. Generate every file from a square source of at least 512x512 pixels — ideally the original vector logo — and always scale down. Scaling a small upload up to the 512x512 manifest icon produces exactly the blurry home-screen shortcut you were trying to avoid.

Placement still matters. Keep favicon.ico at the site root even if your other icons live elsewhere, because root-level requests are the ones that cannot follow a path in your HTML. Keep the paths in your markup absolute and consistent, and re-check them after any move to a framework or a subpath.

A five-minute audit for an existing site

1. View source and confirm the five declarations above are present once, with paths that return 200 when opened directly.
2. Open /favicon.ico and /apple-touch-icon.png directly. The first proves the root fallback exists; the second should be 180x180, opaque, and recognisable without its corners.
3. Toggle your system between light and dark with the site open in a Chromium browser and in Firefox, and check the tab icon in both themes at real size.
4. Preview the icon masked — circle and squircle — the way Android launchers will crop it, and confirm nothing important sits outside the central safe zone.
5. Run the deployed URL, not your local files, through the favicon checker, and cross-check anything surprising against the compatibility matrix for which file each platform actually uses.

If the audit turns up a patchwork — icons from three different generators, a transparent touch icon, a manifest pointing at files that moved — rebuilding the package in one pass is usually faster and more reliable than repairing files one by one. That is the job EasyFaviconGenerator is built for: one image in, the SVG with its dark variant, the PNG, ICO, touch and manifest icons out, with the markup above ready to paste and previews in light and dark tabs and search results before you download. It runs entirely in your browser, so an unreleased logo never leaves your machine.

Quick answers

Is there a new favicon format I need to learn in 2026?

No. That is the headline. The formats consolidated around SVG, PNG and ICO, the sizes settled, and the interesting work moved into dark-mode variants and mask-safe design. If your package matches the table above, you are current.

Can I ship just an SVG?

For an internal tool with a controlled, modern audience, you can get away with it. For a public site, you would lose tab icons in Safari 18 and earlier, give Google no raster fallback, and leave iOS and Android home screens to improvise. The extra files cost a few kilobytes; ship them.

Do I need a PWA to use a web app manifest?

No. A manifest can exist simply to name your site and declare its 192x192 and 512x512 icons for Android and Chromium. Installability is a separate, higher bar with its own requirements; nothing about linking a manifest promises it.

My favicon is correct but Google still shows the old one. Is it broken?

Almost certainly not. Check that the icon is crawlable, square, larger than 48x48 pixels and a raster format Google supports (not SVG), then give Google days rather than hours to recrawl and refresh it. Redeploying daily with new URLs tends to restart the wait you are trying to end.

The short version

The state of the favicon in 2026 is calm: an SVG first for desktop and dark mode, a 96x96 PNG for fallbacks and Google, a small three-size ICO at the root, one opaque 180x180 Apple touch icon, and 192/512 manifest icons for Android — all from a square master of at least 512x512, and nothing else by default. Generate that set, preview it at 16 pixels in light and dark, and run the live site through the favicon checker. For the size-by-size reasoning behind the list, see our favicon sizes and formats cheat sheet — or create the 2026 package from your logo and be done before your coffee cools.

Related articles

• Why your favicon isn’t showing up (and how to fix it)
• How to add a favicon to WordPress (Site Icon and full set)
• Add a favicon to Shopify, Wix or Squarespace

All favicon articles