Favicon Generator
Blog

Notes on favicons

Short, practical write-ups from building this tool — the recurring problems and the current best practice.

Guide · 5 min read

Add a favicon to React, Next.js, Vue & WordPress

The favicon files are identical everywhere — what differs is where they go and whether the framework writes the <link> tags for you. Step-by-step for Vite, CRA, both Next.js routers, Vue, Astro, SvelteKit and WordPress, plus the domain-root rule that trips everyone up. Read the full guide →

Guide · 3 min read

Why your favicon won't update — and how to force it

You changed the favicon, deployed, refreshed — and the old one is still there. This is the single most common favicon complaint, and it is almost never a code problem. Browsers cache favicons far more aggressively than pages or images, and the favicon cache often survives a normal reload.

Work through it in this order:

  • Hard refresh. Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac) reloads bypassing the page cache.
  • Reopen the tab. The favicon cache is frequently tied to the open tab. Close it completely and open a new one.
  • Bust it with a query. Point the link at a "new" URL while testing: <link rel="icon" href="/favicon.ico?v=2">. Bump the number on each change.
  • Confirm the file is really there. Load yourdomain.com/favicon.ico directly — if it 404s, the browser is showing a cached icon for a file that no longer exists.

Google Search is its own case. It caches your favicon separately from your pages and refreshes on Google's schedule, so a new icon in search results can lag by days or weeks even after your site is correct. There is no button to speed that up — make sure /favicon.ico returns 200 to Googlebot and wait.

Opinion · 4 min read

Stop generating 20 favicon files — the 2026 minimal set

Plenty of favicon tools still hand you a ZIP with sixteen PNGs, a browserconfig.xml and Microsoft tile images. Almost all of it is dead weight. Windows tiles were retired with the Live Tiles interface; the pile of intermediate PNG sizes solved a browser problem that no longer exists.

Here is the set that covers everything in use today:

  • favicon.ico — multi-size (16/32/48), for legacy browsers and Google Search.
  • icon.svg — one scalable file modern browsers prefer, dark-mode capable.
  • apple-touch-icon.png — 180×180 for iOS home screens.
  • android-chrome-192 and -512 PNGs — referenced from your web app manifest for Android and PWAs.

Five files, four <link>/manifest references, done. Fewer files means less to keep in sync, a lighter deploy, and no stale browserconfig.xml pointing at images you deleted. If a tool insists you need twenty, it is optimising for looking thorough, not for what browsers request.

Technique · 3 min read

SVG favicons and dark mode: one icon that adapts

A dark logo looks sharp on a light tab bar and nearly disappears on a dark one. Shipping two files and swapping them is fiddly. With an SVG favicon you can let a single file react to the browser theme, because the browser applies CSS inside the SVG when it renders the icon.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .glyph { fill: #111; }
    @media (prefers-color-scheme: dark) { .glyph { fill: #fff; } }
  </style>
  <path class="glyph" d="…"/>
</svg>

Reference it with <link rel="icon" href="/icon.svg" type="image/svg+xml"> and keep a plain favicon.ico as the fallback — older browsers and Google Search won't evaluate the media query, so they need a static icon too. The result: on a light system the glyph is dark, on a dark system it flips to light, from one small file.