How Browsers Actually Load Favicons (And Why Yours Won't Update)

You changed your favicon three hours ago. Your browser still shows the old one. Here's why.

The Favicon Cache Is Not Your Regular Cache

Browsers cache favicons differently from images, CSS, and JavaScript. Chrome stores favicons in a separate database—the Favicon Cache—that survives cache clears, hard reloads, and sometimes browser restarts. Firefox has a favicons.sqlitefile that ties icons to history entries. Safari stores them in a system-level icon cache.

Clearing your browser cache won't touch any of these. That's why you still see the old favicon three hours after deploying the new one.

The Version-Busting Trick

Add a query string to your favicon URL:

<link rel="icon" href="/favicon.svg?v=2">

Change the ?v=2 to ?v=3 each time you update the favicon. The browser treats it as a completely new URL—bypassing the dedicated favicon cache entirely. This works because the URL change triggers a fresh fetch, not a cache lookup.

Mask-Icon Has Its Own Cache

Safari's pinned tab icon (mask-icon) is cached separately from the regular favicon. I once spent an afternoon debugging why Safari tabs still showed a purple icon after a full rebrand to amber. The mask-icon URL hadn't changed. Safari refreshed the standard favicon and completely ignored the pinned tab icon. Add the same version query string to your mask-icon link.