Cuando alguien añade tu sitio web a la pantalla de inicio de su iPhone o iPad, iOS utiliza el Apple Touch Icon como icono de aplicación. Sin él, iOS toma una fea captura de pantalla de tu página. Aquí tienes todo lo que necesitas saber.
¿Qué es un Apple Touch Icon?
Un Apple Touch Icon es una imagen PNG especial que los dispositivos iOS utilizan cuando un usuario marca tu sitio en su pantalla de inicio. Funciona como un icono de aplicación nativa: iOS aplica automáticamente sus esquinas redondeadas distintivas y un efecto de brillo (en versiones antiguas de iOS). Se declara en HTML con:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">Tamaño Requerido: 180×180 Píxeles
En 2026, solo necesitas un tamaño: 180×180 píxeles. Aquí te explicamos por qué:
- iPhone (Retina) — Usa 120×120 o 180×180 (iOS escala 180 a 120 si es necesario)
- iPad Pro — Usa 167×167 (iOS escala 180 hacia abajo)
- iPad — Usa 152×152 (iOS escala 180 hacia abajo)
Dado que iOS puede escalar hacia abajo pero no puede escalar hacia arriba bien, proporcionar el tamaño más grande (180×180) es el enfoque más seguro. Un solo archivo cubre todos los dispositivos.
Nota histórica: En el pasado, necesitabas tamaños separados para cada dispositivo (57, 60, 72, 76, 114, 120, 144, 152, 167, 180). El iOS moderno maneja el escalado lo suficientemente bien como para que 180×180 por sí solo funcione perfectamente.
Requisitos del Formato de Archivo
- Formato: Solo PNG (JPEG funciona, pero PNG es el estándar)
- Forma: Cuadrado (iOS aplica esquinas redondeadas automáticamente)
- Transparencia: Evítala — iOS reemplaza las áreas transparentes con negro
- Nombre de archivo: La convención es
apple-touch-icon.png(iOS también busca este nombre automáticamente)
Implementación HTML
Básico (una línea)
<link rel="apple-touch-icon" href="/apple-touch-icon.png">Con tamaño explícito
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">Descubrimiento automático (no se necesita HTML)
Si colocas un archivo llamado apple-touch-icon.png en el directorio raíz de tu sitio web, iOS lo encontrará automáticamente, incluso sin ninguna declaración HTML. Sin embargo, se sigue recomendando declararlo explícitamente en HTML para mayor fiabilidad.
apple-touch-icon vs apple-touch-icon-precomposed
| Atributo | apple-touch-icon | apple-touch-icon-precomposed |
|---|---|---|
| Efecto de brillo | iOS añade brillo (iOS 6 y anteriores) | No se añade brillo |
| iOS moderno (7+) | Sin brillo (mismo comportamiento) | Sin brillo (mismo comportamiento) |
| Recomendación | Usa este | Obsoleto, no necesario |
Dado que iOS 7+ ya no añade el efecto de brillo, apple-touch-icon y apple-touch-icon-precomposed se comportan de forma idéntica. Simplemente usa apple-touch-icon.
Consejos de Diseño
- No añadas esquinas redondeadas — iOS las aplica automáticamente. Si las redondeas tú mismo, obtendrás esquinas doblemente redondeadas.
- Evita la transparencia — Usa un color de fondo sólido. Las áreas transparentes se vuelven negras en iOS.
- Mantenlo simple — El icono se muestra a ~60px en pantalla. Los detalles finos no serán visibles.
- Usa el color de tu marca como fondo — Esto asegura que el icono destaque en cualquier fondo de pantalla.
- Prueba en un dispositivo real — El simulador de iOS no siempre coincide con los dispositivos reales.
Errores Comunes
- Usar transparencia → Fondo negro en la pantalla de inicio de iOS
- Añadir esquinas redondeadas manualmente → Efecto de doble redondeo
- Formato de archivo incorrecto → SVG no es compatible; usa PNG
- Demasiado pequeño → Proporcionar 57×57 se ve borroso en pantallas Retina modernas
- Olvidar probar → Siempre prueba añadiéndolo a la pantalla de inicio en un iPhone real
Mira cómo lo hacen otros sitios
¿Tienes curiosidad por saber cómo manejan los sitios web importantes sus Apple Touch Icons? Usa Mzu favicondl para verificar la configuración de favicon de cualquier sitio web, incluido el Apple Touch Icon.