Favicon para Next.js
Next.js 14+ App Router trata /app/icon.png y /app/favicon.ico como convenciones: basta con colocarlos ahí y Next genera las etiquetas correctas de forma automática.
Coloca favicon.ico dentro de /app y Next lo servirá en /favicon.ico e inyectará la etiqueta de enlace.
Para iconos multiresolución o con tema, usa las convenciones de archivo: icon.png, icon.svg, apple-icon.png dentro de /app. Next genera las etiquetas <link> a partir de los metadatos del archivo.
Cómo funciona
- 1
Genera favicon.ico
Multiresolución 16/32/48/64 a partir de una fuente de 512×512.
- 2
Colócalo en /app
/app/favicon.ico se sirve automáticamente. Añade icon.png para HD.
- 3
Verifica
Abre /favicon.ico en tu navegador — Next lo sirve sin configuración adicional.
Pruébalo ahora
Genera un favicon listo para Next.js
Generador de FaviconPreguntas frecuentes
¿Dónde van los iconos en Next.js App Router?+
Dentro del directorio /app. El nombre del archivo (icon, apple-icon, favicon) determina su función.
¿Y con el Pages Router?+
Coloca favicon.ico en /public y enlázalo desde _document.tsx.
¿Sigo necesitando un .ico multiresolución?+
Es recomendable para compatibilidad con navegadores antiguos, sobre todo Edge y accesos directos en modo IE.
Herramientas relacionadas
Generador de Favicon
Genera un pack completo de favicons (ICO + PNGs) para cada dispositivo y navegador.
Convertidor de PNG a ICO
Convertidor online gratuito de PNG a ICO para iconos de Windows, apps y favicons de sitios web.
Convertidor de SVG a PNG
Rasteriza gráficos vectoriales SVG en PNG a cualquier resolución.