Next.js Favicon Not Updating? Here's the Fix
The file changed and the tab didn't. On Next.js that's one of three caches: the browser's favicon store, a stale .next build, or a CDN serving the old bytes. Rule them out in that order.
Confirm the file actually changed first
Before touching caches, open /favicon.ico directly. If the old image loads there, the new file was never served (a build or placement problem) and no amount of hard-refreshing helps. Fix that first.
If the direct URL shows the new icon but the tab still shows the old one, it's a genuine cache. Browsers cache favicons harder than almost any other asset and keep them separately from the page.
Bust the caches in order
- 1
Hard-refresh in a private window
Cmd+Shift+R or Ctrl+F5, or a fresh private window. This clears the browser's own favicon store, which is the most common culprit.
- 2
Delete .next and rebuild
A stale build can keep emitting the old icon. Remove the .next directory and rebuild so Next re-reads your app-directory files.
- 3
Purge the CDN or platform cache
On Vercel or any CDN, the edge can serve the old /favicon.ico after a redeploy. Invalidate that path, then re-open the direct URL.
Next.js favicon not updating: FAQ
Why isn't my Next.js favicon updating?
Either the new file was never served (check /favicon.ico directly) or a cache is holding the old one. Browsers cache favicons aggressively, and a stale .next build or CDN can keep emitting the previous file after a deploy.
How do I force a favicon update in Next.js?
In the Pages Router, append a version query string to the link href. In the App Router you can't, since the tag is generated: change the file and redeploy, delete .next to clear a stale build, and purge the CDN.
It updates locally but not on Vercel.
The edge cache is serving the old /favicon.ico. Confirm the deploy actually contains the new file, then purge or redeploy so the edge re-fetches it, and check the direct URL in a private window.