¿Qué es un Apple Touch Icon?
El apple-touch-icon es la imagen que iOS utiliza cuando los usuarios añaden tu sitio web a su pantalla de inicio. Aparece junto a los iconos de las apps nativas, por lo que debe verse profesional y reconocible.
¿Por qué es importante?
- Apariencia en la pantalla de inicio — Sin él, iOS hace una captura de pantalla de tu página, que normalmente se ve terrible
- Reconocimiento de marca — Tu icono aparece junto a apps nativas como Instagram y WhatsApp
- Visitas recurrentes — Los usuarios que añaden tu sitio a la pantalla de inicio son altamente comprometidos
- Soporte PWA — Esencial para instalar Progressive Web Apps en iOS
- Web clips — Se utiliza en los marcadores de Safari y la lista de lectura
Cómo solucionarlo
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />Especificaciones de la imagen
- Tamaño: 180x180 píxeles (iOS la reducirá para dispositivos más antiguos)
- Formato: PNG (sin transparencia — iOS aplica sus propios efectos)
- Forma: Cuadrada sin esquinas redondeadas (iOS aplica el redondeo automáticamente)
- Sin transparencia — Usa un color de fondo sólido
Consejos de diseño
- Mantenlo simple — Debe funcionar en tamaños pequeños como 60x60
- Fondo sólido — Los fondos transparentes se ven negros en iOS
- Sin esquinas redondeadas — iOS aplica su propio radio de esquina
- Coherente con tu favicon — Debe ser reconocible como la misma marca
- Prueba en dispositivos reales — Añade tu sitio a la pantalla de inicio para comprobarlo
Tamaños adicionales (opcional)
<!-- Principal (obligatorio) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<!-- Opcional: tamaños específicos para diferentes dispositivos -->
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png" />En la práctica, proporcionar solo la versión de 180x180 es suficiente — iOS la reducirá según sea necesario.