Have you ever updated your favicon in a Next.js project, only to see the new icon show up in one browser (like Edge) but not in others like Brave or Chrome?
You're not alone—and there's a good reason for this.
Modern browsers—especially Chromium-based ones like Brave, Chrome, and Opera—aggressively cache favicons. This means even if you've updated the favicon.ico file and restarted your dev server, the browser might still display the old one from cache.
This caching behavior improves performance, but it causes confusion during development.
✅ How I Fixed It (in Brave)
Here’s what finally worked:
🔁 1. Hard Refresh the Tab
Force Brave to reload without using cache:
Windows/Linux: Ctrl + Shift + R
macOS: Cmd + Shift + R
If that fails…
🧼 2. Clear the Favicon Cache
Brave (and Chrome) provide a hidden tool for this:
Open chrome://favicon-internals in Brave
Click on Clear Favicon Cache
Reload your site
Still not working? Try one more thing…
📝 3. Rename the Favicon File
Browsers cache based on the URL. Renaming the file tricks the browser into thinking it’s a new one.
Rename your file to something like favicon-v2.ico
Update your Next.js metadata:
tsx
Copy
Edit
export const metadata = {
title: "254THREADS",
icons: {
icon: "/favicon-v2.ico",
},
};
Now restart your dev server and refresh the page.
Top comments (0)