Apple touch icon - Docs de MetricSpot

Qué comprueba esta verificación

Busca en <head> un elemento <link rel="apple-touch-icon"> y verifica que el archivo referenciado existe y carga. iOS Safari usa este icono cuando un visitante toca Compartir → Añadir a pantalla de inicio.

Por qué importa

Cuando los usuarios de iOS guardan tu sitio en la pantalla de inicio, te llevas una instalación gratuita con forma de app store — pero solo si has proporcionado el icono. Sin él, iOS renderiza una captura borrosa de la página al tamaño de icono, que parece rota y descuidada. La presentación con aspecto de app eleva de forma significativa la tasa de retorno.

Apple dejó de exigir un touch icon para la indexación hace años, así que la verificación va de presentación y confianza de marca, no de rastreabilidad. Pero el coste es un archivo PNG y tres líneas de HTML, así que no hay razón para saltárselo.

Cómo arreglarlo

Añade un PNG de 180×180 a la raíz de tu sitio y enlázalo:

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

iOS primero busca /apple-touch-icon.png en la raíz del dominio incluso sin etiqueta <link> — así que con solo poner el archivo ahí a menudo funciona. Pero enviar el <link> explícito es más fiable en versiones antiguas de iOS y en clientes terceros modernos (Slack, Discord, lectores RSS) que lo usan para previews.

Enfoque de un solo tamaño (recomendado para la mayoría de sitios):

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

180×180 es el tamaño más grande que pide iOS. iOS lo reduce para objetivos más pequeños — una imagen basta.

Enfoque multi-tamaño (solo si tienes razones de marca para optimizar cada uno):

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180.png">
<link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120.png">

Guía de diseño:

PNG solo. JPEG crea artefactos sobre fondos sólidos; SVG no está soportado.
Sin transparencia. iOS aplica una máscara de esquinas redondeadas y añade un brillo sutil en versiones antiguas — diseña pensando en un lienzo cuadrado a sangre completa.
Que sea legible al tamaño más pequeño (76×76 en iPads antiguos). Un wordmark funciona; un eslogan de 20 caracteres no.
Combínalo con un meta theme-color y un manifest de aplicación web para la experiencia completa de pantalla de inicio en iOS y Android.

Genera todo desde una sola fuente:

RealFaviconGenerator coge una imagen fuente y produce el touch icon, el set de favicons, el manifest y el HTML para pegar — cubre iOS, Android, tiles de Windows e instalabilidad PWA de una pasada.

Astro: mete los iconos en public/ y añade el link en el <head> de BaseLayout.astro.

Next.js: pon apple-icon.png (180×180) directamente en app/ — el App Router auto-genera la etiqueta <link>.

app/
  apple-icon.png   # 180×180
  favicon.ico
  layout.tsx

WordPress: la mayoría de temas modernos aceptan un touch icon en Apariencia → Personalizar → Identidad del sitio. Si no, mete el PNG en la raíz del tema y añade el <link> a header.php.

Preguntas frecuentes

¿Y las pantallas de inicio de Android?

Android usa el manifest de aplicación web para encontrar iconos — el array icons con PNGs de 192x192 y 512x512. El apple touch icon es solo de iOS; envía ambos.

¿Necesito `apple-touch-icon-precomposed`?

No. Esa variante le decía a versiones antiguas de iOS que no aplicaran el efecto brillo. iOS quitó el brillo en iOS 7 (2013); los dispositivos modernos ignoran la variante precomposed por completo. Quédate con apple-touch-icon.

¿Los navegadores recargarán el icono cuando lo actualice?

iOS cachea el icono de forma agresiva. Añade un query string al reemplazarlo (href="/apple-touch-icon.png?v=2") para que las copias en caché se actualicen. El mismo truco funciona con el favicon.