El icono Apple Touch proporciona explícitamente la imagen que se usa cuando un visitante añade tu sitio a la pantalla de inicio de su iPhone. Es independiente del favicon de pestaña y de los iconos declarados en el manifiesto web.
Un solo tamaño: 180×180
180×180 píxeles es la dimensión habitual para proporcionar una imagen de alta definición. iOS puede reducirla para espacios más pequeños, lo que permite mantener una sola declaración en la mayoría de los proyectos.
Las recomendaciones antiguas enumeraban ocho archivos, de 57×57 a 152×152, con una etiqueta sizes para cada uno. Esas variantes ya no son necesarias: sobrecargan el HTML y generan solicitudes adicionales para un resultado idéntico.
El archivo debe ser un PNG. iOS no lee SVG ni WebP para este icono, y un JPEG pierde la nitidez de las zonas de color uniforme.
Es preferible un fondo opaco
Un fondo transparente puede producir un resultado inesperado según la versión y el contexto de visualización. Para controlar el aspecto del icono de la pantalla de inicio, proporciona una composición con un fondo opaco elegido.
La solución es acoplar el icono sobre un fondo opaco antes de exportarlo. Elige un color de marca o un blanco puro si tu símbolo es de colores, y añade un margen aproximado del 10 % alrededor del dibujo para darle espacio.
No hace falta redondear las esquinas: iOS aplica su propia máscara redondeada. Un archivo ya redondeado produce un doble redondeo, con esquinas poco estéticas.
La etiqueta para pegar
Basta una línea en el head de tus páginas: link rel="apple-touch-icon" href="/apple-touch-icon.png". El atributo sizes es opcional si solo proporcionas un archivo.
Puedes añadir meta name="apple-mobile-web-app-title" content="Tu marca" para controlar el texto que aparece bajo el icono. Sin esa etiqueta, iOS usa el título de la página, que suele ser demasiado largo y acaba recortado.
Coloca también una copia del archivo en la raíz con el nombre apple-touch-icon.png: como ocurre con favicon.ico, iOS lo busca en esa dirección si no encuentra ninguna etiqueta.
Por qué tu icono no se actualiza
iOS guarda el icono en caché de forma agresiva y un acceso directo ya añadido a la pantalla de inicio nunca cambia por sí solo. Para probar una nueva versión, elimina el acceso directo, borra los datos de Safari y vuelve a añadir el sitio.
Si el icono sigue sin aparecer, comprueba tres cosas: que el archivo responda con 200 y no 404, que se sirva con el tipo image/png y que no lo bloquee una regla de robots.txt ni una autenticación.
El verificador de favicons de LFFavicon comprueba exactamente estos casos en cualquier URL pública y muestra el icono realmente obtenido.
Fuentes primarias
Preguntas frecuentes
¿Hacen falta varios tamaños de apple-touch-icon?
En la mayoría de los proyectos, un archivo de alta definición de 180×180 permite a iOS generar las versiones más pequeñas. Prueba los dispositivos incluidos en tu lista de compatibilidad.
¿Android usa apple-touch-icon?
Chrome en Android puede usarlo como último recurso, pero primero lee los iconos del manifiesto web. Declara siempre tus iconos de 192×192 y 512×512 en el manifiesto: es la vía oficial.
¿Se puede usar un SVG como icono Apple Touch?
No, iOS espera un PNG de mapa de bits para esta etiqueta. Reserva el SVG para el favicon de los navegadores de escritorio, donde aporta nitidez y compatibilidad con el modo oscuro.