¿Alguna vez has revisado los logs de tu servidor y notado una avalancha de errores 404 para archivos extrañamente específicos como apple-touch-icon-152x152.png? Probablemente entraste en pánico, corriste a tu herramienta de diseño y exportaste una docena de variaciones diferentes de tu logo para satisfacer la interminable línea de dispositivos de Apple.
Deja de hacer eso.
Históricamente, la documentación oficial presionaba a los desarrolladores a crear una imagen única para cada resolución de pantalla. Terminamos con etiquetas <head> infladas, llenas de enlaces para el iPad Mini, el iPhone Pro y todo lo demás. Esta apple touch icon sizes guide te mostrará por qué ese enfoque está completamente obsoleto en 2026.
La Guía Definitiva de Tamaños de Apple Touch Icon
Cuando un usuario toca 'Añadir a la pantalla de inicio' en su iPhone, Safari busca un archivo PNG específico para representar tu sitio. Si no proporcionas uno, iOS genera una captura de pantalla fea e ilegible de tu página web.
Durante años, el consejo estándar fue generar una lista masiva de archivos. Tenías 120x120 para iPhones más antiguos, 152x152 para iPads, 167x167 para iPad Pros y 180x180 para iPhones modernos. Era una pesadilla de mantenimiento que abarrotaba tu repositorio.
La Estrategia Moderna de 'Talla Única'
Aquí está la realidad del desarrollo moderno en iOS: el motor de renderizado de Apple es increíblemente bueno reduciendo imágenes. Ya no necesitas proporcionar cada resolución individual.
Si proporcionas una imagen de alta resolución, iOS calculará automáticamente las matemáticas y la reducirá para que encaje perfectamente en el dispositivo específico del usuario. El único tamaño que realmente necesitas generar hoy es 180x180 píxeles.
Este tamaño corresponde a la resolución @3x requerida por los modelos iPhone Pro Max más grandes. Cuando un iPad más antiguo solicita un icono de 152x152, simplemente toma tu archivo de 180x180 y lo encoge. La diferencia visual es literalmente imperceptible para el ojo humano.
Prueba en el Mundo Real: Cómo lo Hace GitHub
No te fíes solo de mi palabra. Inspecciona el código fuente de grandes empresas tecnológicas como GitHub, Stripe o Vercel. No encontrarás un bloque masivo de iconos legacy de Apple. Sirven exactamente un archivo para dispositivos iOS.
Aquí está el HTML exacto que deberías estar usando:
<!-- El único Apple Touch Icon que necesitas en 2026 -->
<link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'>Esa sola línea reemplaza lo que solían ser seis líneas de código. Ahorra ancho de banda, limpia tu HTML y satisface a todos los dispositivos iOS del mercado. Si quieres profundizar en la ubicación exacta del HTML, revisa nuestra guía completa de configuración para Apple Touch Icons.
Tamaños Históricos vs. El Estándar de 2026
Para entender por qué podemos descartar los tamaños antiguos, mira cómo ha evolucionado el hardware de Apple. Aquí hay un desglose de los requisitos legacy frente a lo que realmente enviamos hoy.
| Dispositivo Objetivo | Tamaño Legacy | Acción en 2026 |
|---|---|---|
| iPhones antiguos (@2x) | 120x120 | Ignorar (iOS reduce los 180px) |
| iPads antiguos (@2x) | 152x152 | Ignorar (iOS reduce los 180px) |
| iPad Pro (@2x) | 167x167 | Ignorar (iOS reduce los 180px) |
| iPhone Pro moderno (@3x) | 180x180 | Requerido |
Reglas de Diseño para tu Icono de 180x180
Acertar con las dimensiones es solo la mitad de la batalla. iOS trata estos iconos de manera diferente a los favicons estándar del navegador. Si simplemente redimensionas tu logo estándar, probablemente se verá roto en la pantalla de inicio de un iPhone.
- Cero Transparencia: iOS no soporta fondos transparentes para los iconos de la pantalla de inicio. Si subes un PNG transparente, Apple llenará agresivamente el espacio vacío con negro sólido. Usa siempre un color de fondo sólido.
- Sin Esquinas Redondeadas: No redondees previamente las esquinas de tu imagen. Sube un cuadrado perfecto. iOS aplica automáticamente su característica máscara 'squircle' sobre tu diseño. Si lo redondeas previamente, terminarás con esquinas doblemente redondeadas muy raras.
- Respeta la Zona Segura: Debido a que Apple aplica esa máscara, cualquier logo colocado demasiado cerca del borde será cortado. Mantén tu gráfico principal centrado y deja unos 20 a 30 píxeles de relleno en todos los lados.
¿Qué Pasa con los Tamaños de Android?
Un error común que veo en los desarrolladores es intentar usar el Apple Touch Icon para dispositivos Android. Aunque las versiones más antiguas de Android podrían haber recurrido al icono de Apple, el Android moderno depende completamente del Web App Manifest.
Android requiere un icono de 192x192 y otro de 512x512. No intentes forzar a tu icono de Apple de 180x180 a hacer doble trabajo aquí. Mantenlos separados. Puedes leer más sobre los requisitos de Android en nuestra guía de requisitos de iconos PWA.
Deja de Complicar tus Iconos
Perdemos demasiado tiempo persiguiendo resoluciones legacy perfectas al píxel. La web ha avanzado, y los navegadores son más inteligentes que hace una década.
Genera un único PNG de alta calidad de 180x180. Asegúrate de que tenga un fondo sólido, mantén el logo centrado y enlázalo en tu <head>. Si no quieres lidiar con Photoshop o Figma para obtener el relleno exacto, simplemente suelta tu logo en Mzu favicondl. Nosotros manejamos automáticamente las zonas seguras, eliminamos la transparencia y escupimos el archivo exacto de 180x180 que iOS espera, junto con tus favicons web estándar.