¿El favicon de Next.js no se actualiza? Aquí está la solución
El archivo cambió y la pestaña no. En Next.js eso es una de tres cachés: el almacén de favicons del navegador, un build .next obsoleto o una CDN sirviendo los bytes antiguos. Descártalas en ese orden.
Confirma primero que el archivo cambió de verdad
Antes de tocar cachés, abre /favicon.ico directamente. Si ahí carga la imagen antigua, el archivo nuevo nunca se sirvió (un problema de build o de ubicación) y ninguna recarga forzada ayuda. Arregla eso primero.
Si la URL directa muestra el icono nuevo pero la pestaña sigue mostrando el antiguo, es una caché de verdad. Los navegadores guardan los favicons en caché con más fuerza que casi cualquier otro recurso y los mantienen aparte de la página.
Purga las cachés en orden
- 1
Fuerza la recarga en una ventana privada
Cmd+Shift+R o Ctrl+F5, o una ventana privada nueva. Esto limpia el almacén de favicons del propio navegador, que es el culpable más habitual.
- 2
Elimina .next y vuelve a compilar
Un build obsoleto puede seguir emitiendo el icono antiguo. Elimina el directorio .next y vuelve a compilar para que Next relea tus archivos del directorio app.
- 3
Purga la caché de la CDN o de la plataforma
En Vercel o en cualquier CDN, el edge puede servir el /favicon.ico antiguo tras un redespliegue. Invalida esa ruta y luego vuelve a abrir la URL directa.
El favicon de Next.js no se actualiza: preguntas frecuentes
¿Por qué no se actualiza mi favicon de Next.js?
O el archivo nuevo nunca se sirvió (comprueba /favicon.ico directamente) o una caché retiene el antiguo. Los navegadores guardan los favicons en caché de forma agresiva, y un build .next obsoleto o una CDN pueden seguir emitiendo el archivo anterior tras un despliegue.
¿Cómo fuerzo una actualización del favicon en Next.js?
En el Pages Router, añade una cadena de consulta de versión al href del enlace. En el App Router no puedes, porque la etiqueta se genera: cambia el archivo y redesplega, elimina .next para limpiar un build obsoleto y purga la CDN.
Se actualiza en local pero no en Vercel.
La caché del edge está sirviendo el /favicon.ico antiguo. Confirma que el despliegue contiene realmente el archivo nuevo, luego purga o redesplega para que el edge lo vuelva a obtener, y comprueba la URL directa en una ventana privada.