Cómo añadir un favicon en Next.js (App Router y Pages Router)

Next.js gestiona los favicons de forma distinta según uses el App Router (app/) o el Pages Router (pages/). Esta guía cubre ambos, además de las convenciones de archivos que permiten a Next.js generar tus etiquetas <link> automáticamente.

El método más rápido: usa las convenciones de archivos de Next.js

En el App Router, Next.js detecta automáticamente nombres de archivo especiales en tu directorio app/ e inyecta las etiquetas correctas en <head> sin escribir código.

Coloca cualquiera de estos archivos directamente en app/:

Archivo	Qué hace
`favicon.ico`	El clásico `.ico` — respaldo universal
`icon.png` / `icon.svg`	Icono moderno; Next.js lo escala automáticamente
`apple-icon.png`	Touch icon de iOS / Safari

app/
├── favicon.ico          # universal fallback
├── icon.png             # main icon (≥512×512)
├── icon.svg             # optional, crisp vector
├── apple-icon.png       # 180×180 for iOS
└── layout.tsx

Eso es todo — no necesitas etiquetas <link> manuales. Next.js generará el marcado correcto en el momento de la compilación.

¿Necesitas todos esos archivos generados a partir de una imagen? Súbela a Favicon.one y descarga el paquete completo listo para el directorio app/.

Añadir tamaños extra y un manifest

Para una configuración PWA completa (Android, pantallas de splash, múltiples tamaños PNG), genera los archivos y añade una configuración de iconos basada en metadata en layout.tsx:

import type { Metadata } from 'next'

export const metadata: Metadata = {
  icons: {
    icon: [
      { url: '/favicon.ico', sizes: 'any' },
      { url: '/icon.svg', type: 'image/svg+xml' },
      { url: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
      { url: '/favicon-16x16.png', sizes: '16x16', type: 'image/png' },
    ],
    apple: ['/apple-touch-icon.png'],
  },
  manifest: '/site.webmanifest',
}

Pages Router (heredado)

Si usas el Pages Router, no hay archivos de icono detectados automáticamente. Pon tus archivos en public/ y añade las etiquetas en pages/_document.tsx:

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html lang="en">
      <Head>
        <link rel="icon" href="/favicon.ico" />
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
        <link rel="manifest" href="/site.webmanifest" />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

Problemas comunes con el favicon en Next.js

1. El favicon aparece en desarrollo pero no en producción

Normalmente es un problema de caché de compilación. Elimina .next y vuelve a compilar. Confirma también que el archivo realmente se copia al output — revisa .next/static o tu despliegue.

2. Usar una imagen no cuadrada

Los favicons deben ser cuadrados. Recorta primero tu imagen de origen, o el icono se verá estirado. El generador de Favicon.one se encarga del recorte y el escalado por ti.

3. Next.js almacena favicons obsoletos en caché

Next.js aplica hashing agresivo a los recursos estáticos. Tras reemplazar un favicon, haz una recompilación completa y vuelve a desplegar — y dile a los usuarios que recarguen con fuerza.

4. Poner los archivos del favicon en la carpeta equivocada

App Router: los archivos van en app/. Pages Router: los archivos van en public/. Confundir estas carpetas es el error de favicon más común en Next.js.

Verifica que funcionó

Tras desplegar, audita tu sitio con el Favicon Checker — confirma que todos los iconos y etiquetas requeridos están presentes y correctamente referenciados.

¿Quieres el paquete completo de archivos de favicon con la estructura correcta de Next.js? Genera gratis en Favicon.one.