El apple-touch-icon: Una Guía Completa
Cuando alguien añade tu sitio a la pantalla de inicio de su iPhone, iOS recurre a una tag. Fállala y agarra un screenshot borroso de tu página en su lugar.
Qué es el apple-touch-icon
El apple-touch-icon es el icono que iOS usa cuando un usuario toca Añadir a la Pantalla de Inicio. Es independiente de tu favicon e independiente del web app manifest. Existe porque iOS quiere un icono estilo app en calidad completa, no el diminuto favicon de la pestaña ampliado.
Un único PNG 180x180 es suficiente. El iOS actual reduce ese único archivo para cada contexto que necesita, así que no publicas la antigua escalera de tamaños 57, 72, 114 y 152.
El link tag
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- You can pin the size, but iOS defaults to the 180 file fine: -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">iOS también busca /apple-touch-icon.png en la raíz del sitio incluso sin tag, pero declararlo es más fiable entre distintas configuraciones.
La especificación de un vistazo
| Propiedad | Valor |
|---|---|
| Dimensiones | 180x180 |
| Formato | PNG |
| Transparencia | Ignorada, compuesta sobre negro |
| Esquinas | Origen cuadrado, iOS las redondea por ti |
| Nombre del archivo | apple-touch-icon.png en la raíz del sitio |
Trampas comunes
No tener ningún apple-touch-icon es el peor caso. Cuando iOS no encuentra uno, recurre a un screenshot reducido de la página, que queda borroso y fuera de la identidad. Una sola tag lo soluciona.
Redondear las esquinas tú mismo es un error. iOS aplica su propia máscara de cuadrado redondeado, así que un origen pre-redondeado se redondea dos veces y muestra un borde fino de fondo alrededor del icono. Dale una imagen cuadrada, full-bleed.
Actualizar no es instantáneo. Una vez que alguien ha añadido tu sitio a su pantalla de inicio, cambiar el icono en tu servidor no actualiza su acceso directo existente. Tiene que eliminarlo y añadirlo de nuevo para recoger el nuevo icono.
Preguntas frecuentes
¿Qué tamaño tiene un apple-touch-icon?
180x180 píxeles, como PNG. El iOS actual escala ese único archivo para cada contexto, así que no necesitas los tamaños antiguos 57, 72, 114 o 152.
¿Por qué mi apple-touch-icon muestra un fondo negro?
iOS ignora la transparencia en el apple-touch-icon y lo compone sobre negro. Exporta el PNG con un color de fondo sólido en vez de transparente.
¿Por qué iOS muestra un icono borroso para mi sitio?
Probablemente no tienes un apple-touch-icon. Sin uno, iOS usa un screenshot reducido de la página. Añade un PNG 180x180 y el link tag correcto.
¿Por qué mi icono de la pantalla de inicio no se actualizó después de cambiarlo?
Los accesos directos existentes en la pantalla de inicio guardan en caché el icono con que fueron creados. El usuario tiene que eliminar el acceso directo y añadir el sitio de nuevo para recoger un nuevo apple-touch-icon.