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>
:
Lighthouse nie sprawdza, czy ikona rzeczywiście istnieje ani czy ma prawidłowy rozmiar.
Jak dodać ikonę Apple Touch
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> …
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