Favicon works in local but not in deploy (App Router, file-based icon in /app) — /favicon.ico loads in production but the tab icon doesn’t show

[vladimirzb]

Summary

Describe the bug

Using Next.js App Router with the file-based icon in the app/ directory, the favicon shows in local development but not in production.
On production, opening https://4success.com.ar/favicon.ico
loads the icon, but the browser tab icon doesn’t update.

Additional information

Steps to reproduce

Next.js project using App Router (app/).

Favicon placed via file-based metadata in app/ (per docs), e.g. app/favicon.ico.

Run locally → favicon appears on the tab.

Deploy using Easypanel with Nixpacks.

In production → https://4success.com.ar/favicon.ico loads, but the tab icon is not shown.

Expected behavior

If the favicon is provided via file-based metadata in app/ and /favicon.ico is reachable in production, the tab icon should appear the same as it does locally.

Links

Site: https://4success.com.ar

Favicon file (production): https://4success.com.ar/favicon.ico

Hosting / Build

Hosting: Easypanel

Builder: Nixpacks

Notes

No extra icon configuration added; relying on file-based metadata in app/ as per Next.js documentation. Looking for guidance on why the favicon wouldn’t display on the tab in production despite the file being accessible.

[icyJoseph]

Hi did you try in incognito mode? Browsers cache the favicon and if they ever got 404'd might show the empty favicon for a while.

Try to hard refresh by opening dev tools and doing cmd+shift+R, or verify it in incognito mode.

[vladimirzb]

Thanks it worked @icyJoseph! One question: why does a normal reload (Ctrl+R) keep the stale favicon, but reloading with DevTools open makes it update?
Does DevTools change caching behavior (e.g., “Disable cache” or “Empty cache and hard reload”) for favicons?

[icyJoseph]

It's the browser btw, not Next.js, https://dev.to/jvicmaina/why-your-favicon-isnt-updating-across-all-browsers-and-how-to-fix-it-2i3c