---
title: Next.js Favicon Not Updating? Here's the Fix
description: You replaced the file but the tab shows the old icon. On Next.js that's the browser's favicon cache, or a stale .next build or CDN serving the old bytes.
canonical: https://favicontools.com/fix/nextjs-favicon-not-updating
---

# 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.

> **You can't add ?v=2 to an auto-generated App Router link:** In the App Router, Next builds the icon link for you, so you can't append a version query string to it. Bust the cache by changing the file and redeploying instead. In the Pages Router, where you write the tag, /favicon.ico?v=2 works.

## 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.