Si alguna vez has abierto tu sitio Next.js en un iPhone y has visto un cuadrado gris en blanco al añadirlo a la pantalla de inicio, te falta el icono táctil de Apple. El favicon de la pestaña del navegador puede verse bien, pero iOS usa un archivo separado, y Next.js tiene una forma específica de servirlo.

Esta guía explica la configuración del icono de Apple en Next.js usando el sistema de metadatos basado en archivos del App Router. Sin rutas API personalizadas, sin etiquetas <link> manuales en _document.tsx — solo coloca un archivo en la carpeta correcta y listo.

Requisitos previos

Antes de empezar, asegúrate de tener:

Paso 1: Prepara el icono táctil de Apple

El icono táctil de Apple es un archivo PNG que iOS usa cuando un usuario añade tu sitio a la pantalla de inicio. El tamaño recomendado es de 180×180 píxeles, pero también puedes proporcionar uno de 167×167 para iPad Pro y 152×152 para iPads más antiguos. Sin embargo, iOS escalará automáticamente un icono de 180×180, así que solo necesitas un archivo.

Si no tienes un icono listo, puedes generar uno a partir de tu logo usando una herramienta como Mzu favicondl. Puede exportar un PNG de 180×180 con la transparencia y el relleno correctos.

Paso 2: Coloca el archivo en el directorio app

En el App Router de Next.js, puedes añadir apple-icon.png (o apple-icon.jpg) directamente en tu directorio app/. Next.js lo detecta automáticamente y lo sirve en la raíz de tu sitio. El archivo debe colocarse en la misma carpeta que tu layout.tsx — típicamente app/.

Aquí tienes un ejemplo de estructura de carpetas:

app/
├── layout.tsx
├── page.tsx
├── apple-icon.png
└── icon.png

Eso es todo. Next.js generará automáticamente la etiqueta <link rel='apple-touch-icon'> adecuada en el head de tus páginas. No necesitas escribir ningún HTML manualmente.

Paso 3: Verifica el HTML generado

Para confirmar que el icono se está sirviendo, ejecuta tu servidor de desarrollo e inspecciona el código fuente de la página. Deberías ver una línea como esta:

<link rel='apple-touch-icon' href='/apple-icon.png' sizes='180x180' type='image/png'/>

Si no la ves, verifica que el archivo se llame exactamente apple-icon.png y que esté en el directorio correcto. Next.js distingue entre mayúsculas y minúsculas en Linux y macOS.

Paso 4: Usa la API de metadatos para más control

Si necesitas especificar varios iconos o quieres configurarlos programáticamente, puedes usar la exportación metadata en tu layout. Esto es útil si tienes diferentes iconos para diferentes rutas o quieres añadir un icono maskable para Android.

Aquí tienes un ejemplo en app/layout.tsx:

import type { Metadata } from 'next';

export const metadata: Metadata = {
  icons: {
    apple: [
      { url: '/apple-icon.png', sizes: '180x180', type: 'image/png' },
    ],
  },
};

Este enfoque te da control total sobre los atributos rel, sizes y type. También puedes usarlo para añadir un icono maskable para PWAs de Android, aunque eso es un tema aparte.

Errores comunes

Aquí tienes algunos problemas con los que podrías encontrarte:

Conclusión

Configurar el icono táctil de Apple en Next.js es sencillo una vez que conoces la convención basada en archivos. Coloca un PNG del tamaño adecuado en tu carpeta app/, y Next.js se encarga del resto. Para escenarios más avanzados, la API de metadatos te da control programático.

Si necesitas generar el icono en sí, prueba Mzu favicondl para crear todos los tamaños requeridos a partir de tu logo. Y para una visión más amplia de la configuración de favicons en Next.js, consulta nuestra guía de favicons de Next.js.

Consulta los requisitos documentados

Next.js documenta los favicons y los iconos de aplicaciones en sus convenciones de archivos de metadatos.