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](https://developer.chrome.google.cn/static/docs/lighthouse/pwa/apple-touch-icon/image/does-provide-valid-appl-cc7f9dc2832c7.png?authuser=0&hl=es)
Lighthouse no verifica si el ícono existe o si es el tamaño correcto.
Cómo agregar un ícono táctil de Apple
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> …
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.