Si alguna vez has añadido una web a la pantalla de inicio de tu iPhone y has visto cómo se renderizaba como un desastre pixelado y borroso, tu configuración de apple touch icon 180x180 probablemente está mal (o directamente no existe). Yo solía enviar paquetes enormes de favicons con una docena de tamaños PNG diferentes solo para contentar a iOS. Era una pérdida de tiempo.

Aquí está la verdad del 2026: solo necesitas un archivo de Apple Touch Icon. La dimensión apple touch icon 180x180 es el estándar de oro. iOS escala automáticamente este único archivo para dispositivos antiguos y lo usa para pantallas retina de alta resolución en hardware moderno.

Ya cubrimos el panorama general en nuestra Guía de Tamaños de Apple Touch Icon, pero hoy vamos a profundizar en por qué este archivo específico de 180 píxeles es el único que importa.

¿Qué es el apple touch icon 180x180?

El apple touch icon 180x180 es un archivo PNG cuadrado que iOS usa cuando un usuario guarda tu sitio web en la pantalla de inicio. Cuando Safari crea ese acceso directo, no se limita a coger tu favicon estándar. Busca una imagen específica de alta resolución para que actúe como icono de la aplicación.

Apple introdujo la dimensión de 180x180 píxeles junto con el iPhone 6 Plus. Como los iPhones modernos tienen pantallas retina de alta densidad, un favicon estándar de 32x32 parece una pesadilla dentada cuando se amplía al tamaño de un icono de app. El cuadrado de 180 píxeles proporciona suficiente densidad de píxeles para verse nítido en cualquier dispositivo iOS.

Cómo iOS Escala Este Único Archivo

Quizás te preguntes qué pasa con los iPhones más antiguos que no tienen pantalla retina 3x. La magia es completamente automática. Cuando un iPhone 8 (que usa una escala retina 2x) solicita un icono, iOS toma tu PNG de 180x180 y lo escala internamente a 120x120.

No necesitas proporcionar archivos separados de 152x152 o 120x120. El motor de renderizado de Apple maneja el escalado hacia abajo a la perfección. Al servir un solo archivo grande, simplificas tu proceso de compilación y garantizas que la imagen de origen tenga siempre la máxima calidad posible.

Por Qué Este Tamaño Específico Importa para tu Marca

Las primeras impresiones son crueles. Si un usuario ancla tu sitio y ve un cuadrado blanco genérico con una letra minúscula en el medio, asumirá que tu sitio está roto o no es de fiar. Un archivo apple touch icon 180x180 nítido hace que tu web app se sienta como una aplicación nativa.

GitHub lo hace perfectamente. Si inspeccionas su HTML, verás que sirven un PNG de 180x180 meticulosamente diseñado para su icono de pantalla de inicio. Cuando añades GitHub a tu pantalla de inicio, obtienes el reconocible logo Octocat en resolución perfecta, no una captura de pantalla borrosa de su página principal.

El Peligro de Servir Resoluciones Más Bajas

Una vez heredé un proyecto donde el desarrollador anterior usaba un icono de 57x57 (un tamaño heredado de 2010). En un iPhone 14 Pro, ese icono parecía una acuarela. Los píxeles estaban tan estirados que el logo de la marca era completamente ilegible. Servir un archivo de 180x180 lo solucionó al instante.

Si sirves algo más pequeño que 180x180 hoy en día, iOS lo escalará hacia arriba. Los navegadores y sistemas operativos son pésimos escalando imágenes rasterizadas. El resultado es siempre un icono suave y borroso que destruye tu jerarquía visual en la pantalla de inicio del usuario.

Cómo Implementar el apple touch icon 180x180

Añadir este archivo a tu sitio es sorprendentemente simple. Solo necesitas una etiqueta HTML link en el <head> de tu documento. No necesitas JavaScript complejo ni configuración de manifiesto para el soporte básico de iOS.

Aquí está el HTML exacto que debes pegar en tu etiqueta <head>:

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

Coloca el archivo en tu directorio raíz. Aunque técnicamente puedes ponerlo en cualquier sitio, mantenerlo en la raíz asegura que versiones antiguas de iOS puedan encontrarlo automáticamente si ignoran tu etiqueta HTML.

Diseñando el Cuadrado de 180px Perfecto

No te limites a redimensionar el logo completo de tu empresa a un cuadrado de 180x180. Los logos suelen ser horizontales, y forzarlos a un cuadrado los hace pequeños e ilegibles. Necesitas extraer la marca principal.

Sigue estas reglas de diseño para tu archivo:

Para un desglose completo de cómo aislar tu marca y evitar bordes borrosos, consulta nuestra guía sobre la Diferencia entre Favicon y Logo. Los principios de diseño para pestañas del navegador se aplican el doble para los iconos de aplicaciones en la pantalla de inicio.

Mejores Prácticas para 2026

Deja de perder tiempo en tu pipeline de compilación generando 15 tamaños diferentes de iconos iOS. Los archivos heredados de 57x57, 72x72 y 114x114 son peso muerto. Las versiones modernas de iOS los han deprecado por completo.

Mi recomendación estricta para 2026 es generar exactamente un archivo apple touch icon 180x180. Mantén el tamaño del archivo por debajo de 30KB comprimiendo el PNG. Puedes usar Mzu favicondl para extraer, verificar y descargar las dimensiones exactas de 180x180 de cualquier sitio y ver cómo lo hacen los profesionales.

Prueba tu implementación en un iPhone real. Añade el sitio a tu pantalla de inicio y verifica que el icono se vea nítido tanto en modo claro como en modo oscuro. Si se funde con el fondo, tu contraste es demasiado bajo.

Enviar un PNG limpio y único de 180x180 demuestra que entiendes cómo los dispositivos modernos renderizan el contenido web. Mantiene tu HTML ligero y le da a tus usuarios una experiencia de aplicación nativa impecable.