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

Cuando los usuarios de Safari para iOS agregan apps web progresivas (AWP) a sus pantallas principales, el ícono que aparece se llama ícono táctil de Apple. Para especificar qué ícono debe usar tu app, incluye una etiqueta <link rel="apple-touch-icon" href="/example.png"> en el <head> de tu página. Si tu página no tiene esta etiqueta de vínculo, iOS generará un ícono tomando una captura de pantalla del contenido de la página. En otras palabras, indicar a iOS que descargue un ícono da como resultado una experiencia del usuario más refinada.

Cómo falla la auditoría de los íconos táctiles de Lighthouse de Apple

Lighthouse marca las páginas sin una etiqueta <link rel="apple-touch-icon" href="/example.png"> en <head>:

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

Lighthouse no verifica si el ícono existe o si tiene el tamaño correcto.

Cómo agregar un ícono de Apple Touch

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

    <!DOCTYPE html>
<html lang="en">
  <head>
    …
    <link rel="apple-touch-icon" href="/example.png">
    …
  </head>
  …

  2. Reemplaza /example.png por la ruta de acceso real a tu ícono.

Para proporcionar una buena experiencia del usuario, asegúrate de lo siguiente:

  • El ícono es de 180 x 180 píxeles o 192 x 192 píxeles.
  • La ruta de acceso especificada al ícono es válida.
  • El fondo del ícono no es transparente.

Recursos