favicon, icon y apple-icon

Las convenciones de archivos favicon, icon o apple-icon permiten configurar iconos para su 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)

Use un archivo de imagen para configurar un icono de aplicación colocando un archivo de imagen favicon, icon o apple-icon dentro de su directorio /app. La imagen 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 su aplicación.

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

`favicon`

Añada 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ñada 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ñada 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 útil

Puede 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 necesita mayor granularidad, puede 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, puede generar iconos programáticamente usando código.

Genere 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 admitidos
`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/server.

import { ImageResponse } from 'next/server'

// 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/server'

// 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 útil

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

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

No puede generar un icono favicon. Use 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'] }`

Retorno

Dato útil: ImageResponse cumple con este tipo de retorno.

Exportaciones de configuración

Opcionalmente puede 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 Route Handlers 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