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>
:
Narzędzie Lighthouse nie sprawdza, czy ikona faktycznie istnieje ani czy ma właściwy rozmiar.
Jak dodać ikonę Apple Touch
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> …
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