¿El favicon de Next.js no se muestra? Aquí está la solución
En el App Router, Next.js construye los enlaces al icono a partir de los archivos del directorio app. Si te equivocas con el nombre del archivo, no emite nada. En el Pages Router no existe ninguna convención. Averigua cuál de los dos casos tienes y la solución es evidente.
¿En qué router estás?
El App Router lee los archivos llamados favicon.ico, icon y apple-icon del directorio app, calcula su tamaño e inyecta las etiquetas link en el momento del build. Si el archivo está mal nombrado o en la carpeta equivocada, no se emite ninguna etiqueta. No hay error, solo una pestaña en blanco.
El Pages Router no tiene esa convención. No aparece nada a menos que coloques los archivos en public y declares tú mismo las etiquetas link en un head personalizado. Un proyecto migrado a medias entre ambos es el motivo clásico de que un favicon funcione en una ruta y no en otra.
Dónde debe estar el archivo
| Archivo | Router | Qué hace Next.js |
|---|---|---|
| app/favicon.ico | App Router | Se sirve en /favicon.ico, la etiqueta se inyecta automáticamente |
| app/icon.png | App Router | Dimensionado y enlazado automáticamente en el build |
| public/favicon.ico | Pages Router | Solo aparece si añades la etiqueta link a mano |
Confírmalo en treinta segundos
- 1
Abre directamente la URL del icono
Carga /favicon.ico (o /icon) en una pestaña nueva. Un 404 significa que el archivo no está donde Next lo espera: un problema de build, no de caché.
- 2
Ver código fuente y busca rel="icon"
Si no hay ningún enlace de icono en el head, la convención de archivos nunca se activó. Comprueba que el nombre del archivo coincide exactamente: favicon.ico, icon.png, apple-icon.png.
- 3
Descarta la caché en último lugar
Solo una vez que el archivo se resuelve y la etiqueta está presente deberías forzar la recarga en una ventana privada. Nueve de cada diez veces el problema estaba antes de la caché.
El favicon de Next.js no se muestra: preguntas frecuentes
¿Por qué no se muestra mi favicon de Next.js?
En el App Router, porque el archivo está mal nombrado o no está en el directorio app, de modo que no se genera ninguna etiqueta link. En el Pages Router, porque no hay convención automática y no has añadido las etiquetas en un head personalizado. Abre /favicon.ico directamente. Un 404 confirma que es un problema de archivo o de ubicación.
¿Necesito favicon.ico si tengo app/icon.png?
Conserva ambos. icon.png cubre los navegadores modernos con mayor calidad; favicon.ico es lo que los navegadores antiguos, los lectores de feeds y algunos rastreadores de vista previa de enlaces siguen solicitando por ruta.
¿Por qué el favicon se muestra en una página pero no en otra?
Normalmente un proyecto que mezcla App Router y Pages Router. La convención del directorio app solo cubre las rutas que este renderiza; las rutas del Pages Router necesitan sus propias etiquetas link en _document o en un head personalizado.