Nie dostarcza poprawnej ikony apple-touch-icon

Gdy użytkownicy Safari na iOS dodają progresywne aplikacje internetowe (PWA) do ekranu głównego, wyświetlana ikona jest nazywana ikoną Apple touch. Aby określić, jakiej ikony ma używać aplikacja, umieść tag <link rel="apple-touch-icon" href="/example.png"> w sekcji <head> strony. Jeśli na stronie nie ma tego tagu linku, system iOS generuje ikonę, robiąc zrzut ekranu z treścią strony. Innymi słowy, polecenie pobrania ikony przez iOS zapewnia bardziej dopracowane wrażenia użytkownika.

Przyczyna niepowodzenia audytu ikony dotykowej Apple w Lighthouse

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

Nie podano prawidłowej ikony apple-touch-icon

Lighthouse nie sprawdza, czy ikona rzeczywiście istnieje ani czy ma odpowiedni rozmiar.

Jak dodać ikonę Apple Touch

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

    <!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ć wygodę użytkownikom, zadbaj o to, aby:

  • 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