Не предоставляет действительный значок Apple Touch.

Когда пользователи 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.

Lighthouse не проверяет, существует ли значок на самом деле и имеет ли он правильный размер.

Как добавить значок Apple Touch

  1. Добавьте <link rel="apple-touch-icon" href="/example.png"> в <head> вашей страницы:

    <!DOCTYPE html>
<html lang="en">
  <head>
    …
    <link rel="apple-touch-icon" href="/example.png">
    …
  </head>
  …

  2. Замените /example.png фактическим путем к вашему значку.

Чтобы обеспечить хороший пользовательский опыт, убедитесь, что:

  • Размер иконки 180х180 пикселей или 192х192 пикселей.
  • Указанный путь к значку действителен.
  • Фон иконки не прозрачный.

Ресурсы