El mejor generador de favicons para Next.js
Next.js no usa etiquetas link que escribas a mano. El App Router lee archivos llamados icon, apple-icon y favicon del app directory e inyecta el marcado en tiempo de compilación. El generador adecuado te entrega exactamente esos archivos.
Lo que de verdad importa en Next.js
El App Router resuelve los iconos a partir de archivos, no de etiquetas. Un archivo llamado icon, apple-icon o favicon en el app directory se dimensiona y enlaza automáticamente. Así que la pregunta decisiva para un generador es si su salida nombra y ubica los archivos según esa convención, o si te entrega PNG sueltos y un conjunto de etiquetas link que el framework no quiere.
El Pages Router es distinto: ahí colocas los archivos en public y declaras las etiquetas en un Head personalizado. Un generador que sabe en cuál de los dos estás te evita el único error que hace que un favicon de Next.js no emita nada sin avisar.
Los criterios que importan en Next.js
| Qué buscar | Por qué importa en Next.js | Cómo lo hace el generador de aquí |
|---|---|---|
| Nombres de archivo del App Router | Los iconos se resuelven desde app/icon, app/apple-icon, app/favicon.ico | Exporta archivos nombrados y ubicados según esa convención |
| Sin etiquetas escritas a mano | El framework inyecta las etiquetas link por ti | Omite las etiquetas redundantes que añadiría una herramienta genérica |
| Manifest y Android | Las instalaciones PWA necesitan todo el rango de tamaños | Exporta manifest.json más los iconos Android de 192 y 512 |
| Consciente del router | App y Pages resuelven los iconos de forma distinta | La guía de instalación cubre ambos routers, no solo uno |
Dónde van los archivos (App Router)
- app/
- favicon.icoaddServed at /favicon.ico, tag auto-injected
- icon.pngaddSized and linked at build
- apple-icon.pngadd180x180 home screen icon
- public/
- manifest.jsonaddPWA install metadata
- android-icon-192x192.pngadd
- android-icon-512x512.pngadd
Los archivos marcados como añadidos son los que exporta el generador. Todo lo demás es un proyecto de Next.js estándar.
El generador frente a las convenciones de archivos de Next.js por sí solas
Un generador que entiende Next.js
Start hererecomendado
- La exportación coincide con la convención del app directory
- Produce favicon.ico, todos los tamaños PNG y apple-icon
- Incluye manifest.json y los tamaños Android para las instalaciones PWA
- Una imagen de origen, todos los tamaños renderizados correctamente
Colocar tú mismo un solo archivo
- app/favicon.ico por sí solo cubre la pestaña y nada más
- Sin icono apple-touch, así que las pantallas de inicio de iOS recurren al de reserva
- Sin manifest, así que las instalaciones en Android se ven sin terminar
- Redimensionar una imagen a mano rara vez se lee bien a 16px
¿Necesito etiquetas link para un favicon en Next.js?
En el App Router no. Los archivos llamados favicon.ico, icon y apple-icon en el app directory se leen, dimensionan y enlazan automáticamente en tiempo de compilación. Un generador que además emite etiquetas link escritas a mano está añadiendo marcado que el framework ya produce. El Pages Router es la excepción, donde declaras las etiquetas en un Head personalizado.
¿Qué tamaños debería exportar el generador para Next.js?
favicon.ico para la pestaña, un apple-icon de 180x180 para las pantallas de inicio de iOS, y PNG de 192 y 512 referenciados desde manifest.json para Android y las instalaciones PWA. Diseña la marca primero a 16px, ya que ese es el tamaño que decide si se lee.
The step-by-step for Next.js
You've picked the tool. Here's the exact install for Next.js.