Nie dostarcza poprawnej ikony apple-touch-icon

Gdy użytkownicy Safari na iOS dodają progresywne aplikacje internetowe (PWA) na ekranach głównych, wyświetlana ikona nosi nazwę ikony dotykowej Apple. Aby określić, jakiej ikony ma używać aplikacja, umieść tag <link rel="apple-touch-icon" href="/example.png"> w elemencie <head> strony. Jeśli Twoja strona nie ma tego tagu, iOS generuje ikonę, robiąc zrzut ekranu z zawartością strony. Innymi słowy, instruowanie iOS do pobrania ikony zwiększa dobre wrażenia użytkowników.

Niepowodzenie audytu ikony Apple Touch w Lighthouse

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

Nie zawiera prawidłowej ikony apple-touch-icon

Lighthouse nie sprawdza, czy ikona rzeczywiście istnieje ani czy ma prawidłowy 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 zadbać o wygodę użytkowników, zadbaj o to, aby:

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

Zasoby