Когда пользователи iOS Safari добавляют прогрессивные веб-приложения (PWA) на свои домашние экраны, появляющийся значок называется значком Apple Touch . Вы можете указать, какой значок должно использовать ваше приложение, включив тег <link rel="apple-touch-icon" href="/example.png">
в <head>
вашей страницы. Если на вашей странице нет этого тега ссылки, iOS создает значок, делая снимок экрана содержимого страницы. Другими словами, указание iOS загрузить значок приводит к более качественному пользовательскому интерфейсу.
Как происходит сбой аудита значков Lighthouse Apple Touch
Lighthouse помечает страницы без тега <link rel="apple-touch-icon" href="/example.png">
в <head>
:
![Не предоставляет действительный значок Apple Touch.](https://developer.chrome.google.cn/static/docs/lighthouse/pwa/apple-touch-icon/image/does-provide-valid-appl-cc7f9dc2832c7.png?authuser=9&hl=ru)
Lighthouse не проверяет, существует ли значок на самом деле и имеет ли он правильный размер.
Как добавить значок Apple Touch
Добавьте
<link rel="apple-touch-icon" href="/example.png">
в<head>
вашей страницы:<!DOCTYPE html> <html lang="en"> <head> … <link rel="apple-touch-icon" href="/example.png"> … </head> …
Замените
/example.png
фактическим путем к вашему значку.
Чтобы обеспечить хороший пользовательский опыт, убедитесь, что:
- Размер иконки 180х180 пикселей или 192х192 пикселей.
- Указанный путь к значку действителен.
- Фон иконки не прозрачный.