Nie dostarcza poprawnej ikony apple-touch-icon

Użytkownicy Safari na iOS dodają progresywne aplikacje internetowe (PWA) do ich ekranach głównych, wyświetlana ikona nosi nazwę ikony Apple Touch. Możesz określić, jakiej ikony ma używać aplikacja, dodając <link rel="apple-touch-icon" href="/example.png"> w tagu <head> w stronę. Jeśli Twoja strona nie ma tego tagu linku, iOS wygeneruje ikonę, robiąc zrzut ekranu treści strony. Innymi słowy, instrukcje pobierania ikony przez system iOS dają lepsze wyniki. użytkowników.

Niepowodzenie kontroli ikony dotykowego w Lighthouse Apple

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

Nie wyświetla prawidłowej ikony dotyku Apple

Narzędzie Lighthouse nie sprawdza, czy ikona faktycznie istnieje ani czy ma właściwy rozmiar.

Jak dodać ikonę Apple Touch

  1. Dodaj element <link rel="apple-touch-icon" href="/example.png"> do elementu <head> Twojej 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, upewnij się, że:

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

Zasoby