How come favicon only updates when I move my favicon.ico into my public folder instead of inside my app directory?

[victornasar]

Summary

Context:


I replaced my favicon #1 inside my app folder, but later wanted to change it to fav #2. When I replaced it, I still had fav#1 shown in my localhost. It was only when I switched favicon.ico#2 into the public folder where the fav#2 is now updated, giving me a 200. Later, I get a 304 error after refreshing my computer once.

Additional information

No response

Example

No response

[hasan-mohammad-bd]

It sounds like you're experiencing some caching issues with your favicon in a Next.js app. Here's a breakdown of what's happening:

1. Cache persistence: When you replaced the favicon in the app folder, the old favicon was still cached by your browser, so you continued to see it.
2. Update by moving to public folder: By moving the new favicon to the public folder, you triggered a cache update, and the new favicon was loaded, resulting in a 200 status code (success).
3. 304 error after refresh: The 304 status code indicates that the browser has cached the favicon and is reusing the cached version instead of reloading it from the server. This is a normal behavior, as the browser is trying to optimize performance by reducing unnecessary requests.

[victornasar]

Jazzakullahkhair! It worked. All I had to do was clear my browser cache and redeployed my codebase on Vercel without using the existing build cache.

For those with the same issue:

1. Clear your browser's cache completely
2. Go to your Vercel Project > Deployments > Redeploy your current production environment and remember to not check
   use existing build cache.

When testing your favicon on localhost, after changing your favicon, try to run pnpm run build then pnpm run dev.

[hasan-mohammad-bd]

I'm glad to hear that my answer was helpful! If your issue is resolved, could you please mark this answer as accepted? This helps others know that the solution worked for you.

To do this, simply click on the '...' (three dots) next to my comment and select 'Mark as answer'.

Thank you!