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>
:
Lighthouse nie sprawdza, czy ikona istnieje i czy ma odpowiedni rozmiar.
Dodawanie ikony Apple Touch
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> …
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