Apple touch icon: tamaño, etiqueta y comportamiento en iOS
Un apple touch icon es la imagen que iOS usa cuando alguien añade tu sitio a la pantalla de inicio desde Safari. Lo distribuyes como un único PNG de 180x180 en /apple-touch-icon.png y lo referencias con una etiqueta link usando rel="apple-touch-icon". iOS ignora la transparencia de esa imagen y la compone sobre negro, así que dale un fondo opaco, y deja que iOS aplique las esquinas redondeadas en vez de incrustarlas.
Qué hace iOS con él
Cuando un usuario toca Compartir y luego Añadir a la pantalla de inicio en Safari, iOS necesita un icono de lanzador. Busca una etiqueta link con rel="apple-touch-icon", y si no hay ninguna solicita /apple-touch-icon.png y /apple-touch-icon-precomposed.png directamente desde la raíz del sitio. Si no encuentra nada recurre a una captura de pantalla de la página, que nunca parece intencionada.
La imagen que proporcionas es cuadrada y a sangre completa. iOS aplica su propia máscara de esquinas redondeadas al dibujar el icono, así que una imagen de origen con las esquinas ya redondeadas acaba doblemente redondeada con artefactos visibles en los bordes.
La etiqueta
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">Una etiqueta y un archivo es toda la configuración moderna. Sirve el mismo archivo en /apple-touch-icon.png para que la ruta de respaldo sin etiqueta también se resuelva.
Qué incluir
| Elemento | Valor |
|---|---|
| Dimensiones | 180x180 píxeles |
| Formato | PNG, no hace falta alfa |
| Ruta | /apple-touch-icon.png |
| Fondo | Opaco: la transparencia se compone sobre negro |
| Esquinas | Origen cuadrado; iOS enmascara las esquinas por sí mismo |
| Margen de seguridad | Mantén la marca alejada del pequeño porcentaje exterior para que la máscara no la recorte |
Preguntas frecuentes sobre apple touch icon
¿Necesito los nueve tamaños heredados de apple-touch-icon?
No. El iOS actual usa el de 180x180 y lo reduce para contextos más pequeños. Las variantes 57, 60, 72, 76, 114, 120, 144 y 152 solo importan para iPhones e iPads muy antiguos.
¿Qué es apple-touch-icon-precomposed?
Una exclusión heredada. El iOS antiguo añadía un brillo satinado a los iconos de la pantalla de inicio, y la variante precomposed le indicaba que no lo hiciera. iOS dejó de añadir el brillo hace años, así que el simple rel="apple-touch-icon" es todo lo que necesitas.
¿Android usa el apple-touch-icon?
Chrome en Android lo usará como respaldo si tu sitio no tiene iconos en el manifiesto de aplicación web, pero no es algo en lo que confiar. Declara PNG de 192x192 y 512x512 en el manifiesto para Android y deja que el apple-touch-icon sirva a iOS.