No proporciona un ícono apple-touch-icon válido

Published on Updated on

Translated to: English, Português, 한국어

Cuando los usuarios de iOS Safari agregan aplicaciones web progresivas (PWA) a sus pantallas de inicio, el ícono que aparece se llama ícono táctil de Apple. Puede especificar qué ícono debe usar su aplicación al incluir una etiqueta <link rel="apple-touch-icon" href="/example.png"> en la <head> de su página. Si su página no tiene esta etiqueta de enlace, iOS genera un icono tomando una captura de pantalla del contenido de la página. En otras palabras, indicarle a iOS que descargue un icono da como resultado una experiencia de usuario más refinada.

Cómo la auditoría Lighthouse del icono táctil de Apple señala un error

Lighthouse señala la falta de un <link rel="apple-touch-icon" href="/example.png"> en el <head> de las páginas:

No proporciona un icono táctil de Apple válido

Un enlace rel="apple-touch-icon-precomposed" pasa la auditoría, pero ha sido obsoleto desde iOS 7. Use rel="apple-touch-icon"en su lugar.

Lighthouse no comprueba si el icono realmente existe o si el icono tiene el tamaño correcto.

In the Lighthouse report UI the full PWA badge is given when you pass all of the audits in all of the PWA subcategories (Fast and reliable, Installable, and PWA optimized).

Cómo agregar un ícono táctil de Apple

  1. Agregue <link rel="apple-touch-icon" href="/example.png"> al <head> de su página:

    <!DOCTYPE html>
    <html lang="en">
    <head>

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

    </head>
  2. Reemplace /example.png con la ruta real a su ícono.

Codelab

Revise el laboratorio de código Agregar un ícono táctil de Apple a su aplicación web progresiva para ver cómo agregar un ícono táctil de Apple crea una experiencia de usuario más refinada.

Para dar una buena experiencia de usuario, asegúrese de que:

  • El icono tiene 180x180 píxeles o 192x192 píxeles.
  • La ruta especificada al icono es válida
  • El fondo del icono no es transparente.

Recursos

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.