Nie dostarcza poprawnej ikony apple-touch-icon

Gdy użytkownicy Safari na iOS dodają progresywne aplikacje internetowe (PWA) do ekranu głównego, wyświetla się ikona Apple Touch. Aby określić ikonę, której ma używać aplikacja, umieść tag <link rel="apple-touch-icon" href="/example.png"> w sekcji <head> na stronie. Jeśli na stronie nie ma tego tagu linku, iOS generuje ikonę, wykonując zrzut ekranu treści strony. Innymi słowy, poinformowanie iOS o pobieraniu ikony powoduje lepsze wrażenia użytkownika.

Dlaczego kontrola ikony Apple Touch w Lighthouse kończy się niepowodzeniem

Lighthouse oznacza strony bez tagu <link rel="apple-touch-icon" href="/example.png"> w sekcji <head>:

Nie zawiera prawidłowej ikony apple-touch-icon

Lighthouse nie sprawdza, czy ikona istnieje i czy ma odpowiedni rozmiar.

Dodawanie ikony Apple Touch

  1. Dodaj <link rel="apple-touch-icon" href="/example.png"> do <head> na stronie:

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

  2. Zastąp /example.png rzeczywistą ścieżką do ikony.

Aby zapewnić użytkownikom wygodę, pamiętaj o tych kwestiach:

  • Ikona ma wymiary 180 x 180 pikseli lub 192 x 192 pikseli.
  • Podana ścieżka do ikony jest prawidłowa.
  • Tło ikony nie jest przezroczyste

Zasoby