This content originally appeared on DEV Community and was authored by swift king
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.
This content originally appeared on DEV Community and was authored by swift king
swift king | Sciencx (2026-06-23T00:57:15+00:00) How Browsers Actually Load Favicons (And Why Yours Won’t Update). Retrieved from https://www.scien.cx/2026/06/23/how-browsers-actually-load-favicons-and-why-yours-wont-update/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.