App Router puede generar las etiquetas de iconos a partir de archivos convencionales o del objeto metadata. Ambos métodos son válidos, pero mezclarlos sin una regla clara puede crear fácilmente declaraciones en conflicto.
Elegir las convenciones de archivos
Coloca favicon.ico en la raíz de app. Los archivos icon con una extensión compatible pueden estar en un segmento de ruta, mientras que apple-icon describe el icono destinado a dispositivos Apple.
Next.js detecta estos archivos, calcula los atributos útiles y añade los elementos link correspondientes al head. Un icono colocado en un segmento se aplica a las rutas de ese segmento.
| Archivo | Ubicación | Uso |
|---|---|---|
| favicon.ico | app/ | Alternativa del sitio |
| icon.svg | segmento app/ | Icono del navegador |
| apple-icon.png | segmento app/ | Icono de Apple |
| manifest.webmanifest | segmento app/ | Manifiesto instalable |
Usar metadata para rutas explícitas
Si tus recursos están en public o en un servidor de imágenes, declara metadata.icons en un layout o una página. Especifica icon, apple y, si hace falta, shortcut con URL coherentes.
Los metadatos de un segmento hijo pueden sustituir campos compuestos heredados. Por eso conviene inspeccionar el head final de varias rutas en lugar de dar por hecho que se han combinado todas las entradas del padre.
Para un icono generado bajo demanda, Next.js también admite icon.tsx o icon.js. La función devuelve datos de imagen con un tamaño y un tipo explícitos. Reserva este enfoque para composiciones realmente dinámicas: un archivo estático sigue siendo más sencillo de almacenar en caché e inspeccionar.
Vincular el manifiesto y sus iconos
Un archivo manifest estático o una función manifest.ts pueden describir el nombre de la aplicación, los colores y los iconos instalables. Las URL de los iconos del manifiesto deben ser públicas y apuntar a las dimensiones declaradas.
Mantén separada la función del manifiesto de la del favicon de pestaña: un icono de 512×512 destinado a la instalación no sustituye automáticamente a icon.svg ni a favicon.ico.
Probar en producción
Ejecuta una compilación de producción, abre una ruta de cada segmento afectado e inspecciona los elementos link. Después comprueba directamente cada URL de recurso y confirma que ningún middleware la intercepte.
Si usas basePath o una CDN, prueba las URL generadas en el entorno desplegado. El comportamiento local no siempre revela una base pública o una regla de reescritura incorrectas.
Fuentes primarias
Preguntas frecuentes
¿Hay que escribir las etiquetas link a mano?
No. Las convenciones de archivos o metadata.icons pueden generarlas. Elige una fuente de verdad clara.
¿Dónde se coloca favicon.ico?
Con App Router, la convención favicon.ico se admite en la raíz de la carpeta app.
¿Un manifest.ts sustituye a icon.svg?
No. El manifiesto describe, entre otras cosas, los iconos instalables, mientras que icon.svg proporciona directamente el icono del navegador.