Seguro que te ha pasado: abres una web en tu iPhone, la añades a la pantalla de inicio y Safari te muestra un icono genérico, como una captura de pantalla cutre. En cambio, otras páginas lucen un icono limpio y con marca. Esa es la magia del Apple Touch Icon, y si estás montando un proyecto nuevo, seguro que quieres inspirarte en los mejores.

Pero encontrar ese archivo no es tan fácil como parece. Al contrario que el favicon clásico, que suele estar en /favicon.ico, los Apple Touch Icons se esconden en etiquetas <link> o en el archivo manifest.json. Aquí te cuento cómo extraer un Apple Touch Icon de cualquier web, sin tener que adivinar URLs.

Por qué los Apple Touch Icons son tan escurridizos

La mayoría de los desarrolladores conocemos la URL típica del favicon. Pero Apple, como siempre, quiso complicarlo un poco. El icono puede llamarse apple-touch-icon.png, apple-touch-icon-precomposed.png, o estar metido dentro del manifiesto de la web. No hay una convención única.

Por ejemplo, GitHub. Su Apple Touch Icon no está en la raíz. Lo sirven desde https://github.githubassets.com/assets/apple-touch-icon-... con un hash en el nombre. Si intentas acceder a /apple-touch-icon.png, te llevas un 404.

Los tres escondites del Apple Touch Icon

Antes de ponerte a buscar, ten claro dónde mirar:

Método 1: Extraer con las DevTools del navegador (a la vieja usanza)

Es el método más rápido para echar un vistazo. Abre cualquier web, haz clic derecho y selecciona 'Inspeccionar' (o pulsa F12). Ve a la pestaña 'Elementos' y busca 'apple-touch-icon' con Ctrl+F (Cmd+F en Mac).

Te aparecerá algo así:

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

Copia el valor de href. Si es una ruta relativa (como /ruta/al/icono-180.png), añádele el dominio de la web. Abre esa URL en una pestaña nueva y ya tienes el icono.

¿Y si no aparece la etiqueta link?

Algunas webs, sobre todo las PWA modernas, se saltan la etiqueta HTML y usan directamente el manifiesto. En ese caso, busca:

<link rel='manifest' href='/manifest.json'>

Abre ese archivo JSON y busca un objeto con sizes: '180x180' o sizes: '192x192'. Ese es tu Apple Touch Icon.

Método 2: Usa Mzu favicondl (la vía inteligente)

Si extraes iconos con frecuencia —por ejemplo, para auditar a la competencia o coleccionar referencias de diseño—, el método manual se vuelve pesado. Ahí es donde entra Mzu favicondl.

Pega la URL de la web en la herramienta y escanea automáticamente los tres sitios: etiquetas link HTML, manifest.json y el directorio raíz. Encuentra todos los tamaños de Apple Touch Icon y te los muestra listos para descargar. Olvídate de andar buscando en DevTools o adivinando rutas.

Esto es muy útil para sitios como Apple.com, que sirve varios tamaños (152x152, 167x167, 180x180) desde rutas diferentes. Mzu favicondl los descarga todos de golpe.

Consejo: no te olvides de las variantes precomposed

Las versiones antiguas de iOS (anteriores a iOS 7) usaban apple-touch-icon-precomposed, que eliminaba el brillo superficial. El iOS moderno ignora este atributo, pero algunas webs antiguas aún lo usan. Si estás extrayendo un icono de un sitio clásico, revisa ambos valores de rel. Mzu favicondl lo hace solo, pero si lo haces a mano, no te saltes la etiqueta precomposed.

Método 3: El one-liner desde la consola

Para los que viven en el terminal, aquí tienes un snippet de JavaScript que puedes ejecutar en la consola de DevTools:

const links = document.querySelectorAll('link[rel*="apple-touch-icon"]);
links.forEach(link => console.log(link.href));

Esto te muestra todas las URLs de Apple Touch Icon de la página. Si no aparece nada, seguro que la web usa un manifiesto. Prueba con esto:

fetch('/manifest.json')
  .then(r => r.json())
  .then(m => m.icons.filter(i => i.sizes.includes('180'))
  .forEach(i => console.log(i.src)));

Esto obtiene el manifiesto y filtra los iconos de 180x180, que es el tamaño estándar de Apple Touch.

Qué hacer con el icono extraído

Una vez que tengas el archivo, puedes usarlo como referencia para tu propio diseño. Pero no te limites a copiarlo: analízalo. Fíjate en cómo las grandes marcas simplifican su logo hasta convertirlo en una forma reconocible de 180x180 píxeles. Apple usa su silueta. Google usa la 'G'. Stripe usa la 'S'.

Si quieres configurar tu propio Apple Touch Icon, echa un vistazo a nuestra Guía completa de configuración del Apple Touch Icon para ver el HTML exacto y los tamaños que necesitas. Y si aún tienes problemas para que se vea tu icono en iOS, nuestro artículo ¿El favicon no se ve? 7 causas comunes y soluciones cubre los errores más típicos.

En resumen

Extraer un Apple Touch Icon de una web no es complicado cuando sabes dónde buscar. Las DevTools te dan acceso directo a las etiquetas link. El manifiesto tiene la alternativa. Y si lo haces a menudo, Mzu favicondl te ahorra el trabajo repetitivo.

La próxima vez que veas un icono nítido en la pantalla de inicio de tu iPhone, ya sabrás cómo conseguirlo — y cómo crear uno que quede igual de bien en tu propia web.