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

Cuando los usuarios de Safari para iOS agregan apps web progresivas (PWAs) a sus pantallas principales, el ícono que aparece se denomina í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 genera un ícono tomando una captura de pantalla del contenido de la página. En otras palabras, si le indicas a iOS que descargue un ícono, se obtendrá una experiencia del usuario más refinada.

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

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

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

Lighthouse no verifica si el ícono existe realmente 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 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