If you've ever pushed a shiny new rebrand to production, only to have your CEO Slack you a screenshot showing the old logo in their browser tab — you've met the favicon cache monster. Browsers cache site icons more aggressively than almost any other asset on the web.

Why? Because browsers don't treat favicons like normal images. Chrome, for instance, hoards them in a dedicated SQLite database (literally a file called Favicons in your user data directory) completely separate from the standard HTTP cache. This means your standard server cache-control headers often get ignored.

While you can force a favicon cache clear locally on your own machine during development, you can't ask your thousands of users to clear their browser data. You need a programmatic way to force the update. Here are the favicon cache busting best practices we rely on in 2026.

The Hierarchy of Favicon Cache Busting

There are a few ways to tackle this, ranging from quick fixes to professional-grade deployment strategies. Let's break them down by reliability.

Method 1: The Query String (Quick but Imperfect)

The most common approach is appending a query string to your favicon URL. When the browser sees a new URL, it assumes it's a new file and fetches it.

<link rel='icon' type='image/svg+xml' href='/favicon.svg?v=2026.1'>
<link rel='icon' type='image/png' href='/favicon-96x96.png?v=2026.1'>

This works about 90% of the time. However, some aggressive CDN edge nodes and proxy servers are configured to ignore query strings on static assets. If a user is behind a corporate proxy, they might still see the old icon. It's a solid first step, but not bulletproof.

Method 2: Content Hashing (The Professional Standard)

Look at how Stripe or GitHub ship their production assets. They don't use style.css — they use style-8f3b2a.css. You should do the exact same thing with your favicons.

By renaming the actual file based on its content hash, you guarantee that every single browser and proxy on Earth will fetch the new file. It physically cannot be cached because the URL has never existed before.

<link rel='icon' type='image/svg+xml' href='/favicon-a8f9c2.svg'>
<link rel='apple-touch-icon' href='/apple-touch-icon-a8f9c2.png'>

If you are using modern build tools like Vite, Webpack, or Next.js, you can configure your bundler to process your favicons just like your JavaScript files. (Just make sure you update your HTML templates to point to the new dynamically generated filenames).

Method 3: Busting the Web Manifest

Developers often update their HTML tags but completely forget about their Progressive Web App (PWA) manifest. Android Chrome relies heavily on site.webmanifest for home screen and tab icons.

If your favicon is not updating after deployment on mobile devices, this is usually the culprit. You need to cache-bust both the manifest file itself AND the icons inside it.

<!-- Cache bust the manifest link -->
<link rel='manifest' href='/site.webmanifest?v=2'>

Inside your site.webmanifest JSON file, apply the same logic to your icon paths:

{
  "name": "My App",
  "icons": [
    {
      "src": "/icon-192x192.png?v=2",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

The Implicit /favicon.ico Trap

Here is where things get messy. Even if you don't declare a favicon.ico in your HTML, browsers will silently request https://yoursite.com/favicon.ico in the background. It's a legacy behavior from 1999 that refuses to die.

Because this request happens implicitly (without an HTML tag), you cannot append a query string to it. If you replace the favicon.ico file on your server, returning visitors will almost certainly see the old one from their local cache.

Our opinionated fix? Stop relying on the root favicon.ico for modern browsers. Serve a lightweight, multi-resolution ICO file at the root just to satisfy the legacy request and prevent 404 errors, but explicitly declare your modern SVG and PNG icons in your HTML head. Browsers prioritize explicit HTML tags over the implicit root request.

Your Deployment Checklist

To ensure a smooth transition during your next rebrand, follow these steps:

Favicon caching is notoriously stubborn. By moving away from static filenames and embracing content hashing or query strings, you take control away from the browser's SQLite database and ensure your brand always looks fresh.