favicon, icon y apple-icon

Las convenciones de archivos favicon, icon o apple-icon permiten configurar iconos para tu aplicación.

Son útiles para añadir iconos de aplicación que aparecen en lugares como pestañas del navegador, pantallas de inicio de teléfonos y resultados de motores de búsqueda.

Existen dos formas de configurar iconos de aplicación:

Usando archivos de imagen (.ico, .jpg, .png)
Usando código para generar un icono (.js, .ts, .tsx)

Archivos de imagen (.ico, .jpg, .png)

Usa un archivo de imagen para configurar un icono colocando un archivo favicon, icon o apple-icon dentro de tu directorio /app. El archivo favicon solo puede ubicarse en el nivel superior de app/.

Next.js evaluará el archivo y añadirá automáticamente las etiquetas apropiadas al elemento <head> de tu aplicación.

Convención de archivo	Tipos de archivo soportados	Ubicaciones válidas
`favicon`	`.ico`	`app/`
`icon`	`.ico`, `.jpg`, `.jpeg`, `.png`, `.svg`	`app/*/`
`apple-icon`	`.jpg`, `.jpeg`, `.png`	`app/*/`

`favicon`

Añade un archivo de imagen favicon.ico al segmento de ruta raíz /app.

Salida <head>

<link rel="icon" href="/favicon.ico" sizes="any" />

`icon`

Añade un archivo de imagen icon.(ico|jpg|jpeg|png|svg).

Salida <head>

<link
  rel="icon"
  href="/icon?<generated>"
  type="image/<generated>"
  sizes="<generated>"
/>

`apple-icon`

Añade un archivo de imagen apple-icon.(jpg|jpeg|png).

Salida <head>

<link
  rel="apple-touch-icon"
  href="/apple-icon?<generated>"
  type="image/<generated>"
  sizes="<generated>"
/>

Dato importante

Puedes configurar múltiples iconos añadiendo un sufijo numérico al nombre del archivo. Por ejemplo, icon1.png, icon2.png, etc. Los archivos numerados se ordenarán léxicamente.

Los favicons solo pueden configurarse en el segmento raíz /app. Si necesitas más granularidad, puedes usar icon.

Las etiquetas <link> apropiadas y atributos como rel, href, type y sizes se determinan por el tipo de icono y metadatos del archivo evaluado.

Por ejemplo, un archivo .png de 32x32px tendrá atributos type="image/png" y sizes="32x32".

sizes="any" se añade a la salida de favicon.ico para evitar un error del navegador donde un icono .ico tiene preferencia sobre .svg.

Generar iconos usando código (.js, .ts, .tsx)

Además de usar archivos de imagen literales, puedes generar iconos programáticamente usando código.

Genera un icono de aplicación creando una ruta icon o apple-icon que exporte por defecto una función.

Convención de archivo	Tipos de archivo soportados
`icon`	`.js`, `.ts`, `.tsx`
`apple-icon`	`.js`, `.ts`, `.tsx`

La forma más fácil de generar un icono es usando la API ImageResponse de next/og.

import { ImageResponse } from 'next/og'

// Configuración del segmento de ruta
export const runtime = 'edge'

// Metadatos de la imagen
export const size = {
  width: 32,
  height: 32,
}
export const contentType = 'image/png'

// Generación de imagen
export default function Icon() {
  return new ImageResponse(
    (
      // Elemento JSX de ImageResponse
      <div
        style={{
          fontSize: 24,
          background: 'black',
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          color: 'white',
        }}
      >
        A
      </div>
    ),
    // Opciones de ImageResponse
    {
      // Por conveniencia, podemos reutilizar los metadatos de tamaño exportados
      // para configurar también el ancho y alto de ImageResponse.
      ...size,
    }
  )
}

import { ImageResponse } from 'next/og'

// Configuración del segmento de ruta
export const runtime = 'edge'

// Metadatos de la imagen
export const size = {
  width: 32,
  height: 32,
}
export const contentType = 'image/png'

// Generación de imagen
export default function Icon() {
  return new ImageResponse(
    (
      // Elemento JSX de ImageResponse
      <div
        style={{
          fontSize: 24,
          background: 'black',
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          color: 'white',
        }}
      >
        A
      </div>
    ),
    // Opciones de ImageResponse
    {
      // Por conveniencia, podemos reutilizar los metadatos de tamaño exportados
      // para configurar también el ancho y alto de ImageResponse.
      ...size,
    }
  )
}

Salida <head>

<link rel="icon" href="/icon?<generated>" type="image/png" sizes="32x32" />

Dato importante

Por defecto, los iconos generados son optimizados estáticamente (generados en tiempo de compilación y cacheados) a menos que usen funciones dinámicas o datos no cacheados.

Puedes generar múltiples iconos en el mismo archivo usando generateImageMetadata.

No puedes generar un icono favicon. Usa icon o un archivo favicon.ico en su lugar.

Props

La función exportada por defecto recibe las siguientes props:

`params` (opcional)

Un objeto que contiene los parámetros de ruta dinámica desde el segmento raíz hasta el segmento donde icon o apple-icon está ubicado.

export default function Icon({ params }: { params: { slug: string } }) {
  // ...
}

export default function Icon({ params }) {
  // ...
}

Ruta	URL	`params`
`app/shop/icon.js`	`/shop`	`undefined`
`app/shop/[slug]/icon.js`	`/shop/1`	`{ slug: '1' }`
`app/shop/[tag]/[item]/icon.js`	`/shop/1/2`	`{ tag: '1', item: '2' }`
`app/shop/[...slug]/icon.js`	`/shop/1/2`	`{ slug: ['1', '2'] }`

Devuelve

Dato importante: ImageResponse cumple con este tipo de retorno.

Exportaciones de configuración

Opcionalmente puedes configurar los metadatos del icono exportando las variables size y contentType desde la ruta icon o apple-icon.

Opción	Tipo
`size`	`{ width: number; height: number }`
`contentType`	`string` - tipo MIME de imagen

`size`

export const size = { width: 32, height: 32 }

export default function Icon() {}

export const size = { width: 32, height: 32 }

export default function Icon() {}

Salida <head>

<link rel="icon" sizes="32x32" />

`contentType`

export const contentType = 'image/png'

export default function Icon() {}

export const contentType = 'image/png'

export default function Icon() {}

Salida <head>

<link rel="icon" type="image/png" />

Configuración del segmento de ruta

icon y apple-icon son Manejadores de Ruta especializados que pueden usar las mismas opciones de configuración de segmento de ruta que Páginas y Layouts.

Opción	Tipo	Valor por defecto
`dynamic`	`'auto' \| 'force-dynamic' \| 'error' \| 'force-static'`	`'auto'`
`revalidate`	`false \| 'force-cache' \| 0 \| number`	`false`
`runtime`	`'nodejs' \| 'edge'`	`'nodejs'`
`preferredRegion`	`'auto' \| 'global' \| 'home' \| string \| string[]`	`'auto'`

export const runtime = 'edge'

export default function Icon() {}

export const runtime = 'edge'

export default function Icon() {}

Historial de versiones

Versión	Cambios
`v13.3.0`	Se introducen `favicon`, `icon` y `apple-icon`

On this page