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

Cuando los usuarios de Safari para iOS agregan apps web progresivas (PWA) a sus pantallas de inicio, el ícono que aparece se llama ícono de Apple Touch. Puedes especificar qué ícono debe usar tu app si incluyes 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 genera un ícono tomando una captura de pantalla del contenido de la página. En otras palabras, indicarle a iOS que descargue un ícono genera una experiencia del usuario más pulida.

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

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

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

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

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

  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 debe tener un tamaño de 180 × 180 píxeles o 192 × 192 píxeles.
  • La ruta de acceso especificada al ícono es válida.
  • El fondo del ícono no es transparente.

Recursos