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:
Archivos de imagen (.ico, .jpg, .png)
Usa un archivo de imagen para configurar un icono de aplicación colocando un archivo de imagen 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 admitidos | 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.
<link rel="icon" href="/favicon.ico" sizes="any" />icon
Añade un archivo de imagen icon.(ico|jpg|jpeg|png|svg).
<link
rel="icon"
href="/icon?<generated>"
type="image/<generated>"
sizes="<generated>"
/>apple-icon
Añade un archivo de imagen apple-icon.(jpg|jpeg|png).
<link
rel="apple-touch-icon"
href="/apple-icon?<generated>"
type="image/<generated>"
sizes="<generated>"
/>Nota 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 mayor granularidad, puedes usaricon.- Las etiquetas
<link>apropiadas y atributos comorel,href,typeysizesse determinan por el tipo de icono y metadatos del archivo evaluado.- Por ejemplo, un archivo
.pngde 32x32px tendrá los atributostype="image/png"ysizes="32x32".sizes="any"se añade a los iconos cuando la extensión es.svgo no se determina el tamaño de la imagen. Más detalles en este manual de favicons.
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 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/og.
import { ImageResponse } from 'next/og'
// 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'
// 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,
}
)
}<link rel="icon" href="/icon?<generated>" type="image/png" sizes="32x32" />Nota importante:
- Por defecto, los iconos generados tienen optimización estática (generados en tiempo de compilación y cacheados) a menos que usen APIs dinámicas o datos no cacheados.
- Puedes generar múltiples iconos en el mismo archivo usando
generateImageMetadata.- No puedes generar un icono
favicon. Usaicono un archivo favicon.ico en su lugar.- Los iconos de aplicación son Route Handlers especiales que se cachean por defecto a menos que usen una API dinámica u opción de configuración dinámica.
Props
La función de exportación 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' } |
Retorno
La función de exportación por defecto debe retornar un Blob | ArrayBuffer | TypedArray | DataView | ReadableStream | Response.
Nota importante:
ImageResponsecumple 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() {}<link rel="icon" sizes="32x32" />contentType
export const contentType = 'image/png'
export default function Icon() {}export const contentType = 'image/png'
export default function Icon() {}<link rel="icon" type="image/png" />Configuración de segmento de ruta
icon y apple-icon son Route Handlers especializados que pueden usar las mismas opciones de configuración de segmento que Páginas y Layouts.
Historial de versiones
| Versión | Cambios |
|---|---|
v13.3.0 | Se introducen favicon, icon y apple-icon |