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. Puedes especificar qué ícono debe usar tu app incluyendo un Etiqueta <link rel="apple-touch-icon" href="/example.png"> en el <head> de tus . Si tu página no tiene esta etiqueta de vínculo, iOS genera un ícono cuando toma una captura de pantalla del el contenido de la página. En otras palabras, indicar a iOS que descargue un ícono da como resultado una versión más pulida la experiencia del usuario.

Cómo falla la auditoría del ícono táctil de Apple de Lighthouse

Faro marca las páginas sin <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 es el tamaño correcto.

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

  1. Agrega <link rel="apple-touch-icon" href="/example.png"> a la <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