Ikona Apple Touch jawnie wskazuje obraz używany, gdy odwiedzający dodaje witrynę do ekranu głównego iPhone’a. Jest odrębna od favicon karty przeglądarki i ikon zadeklarowanych w manifeście aplikacji internetowej.
Tylko jeden rozmiar: 180×180
180×180 pikseli to powszechnie stosowane źródło o wysokiej rozdzielczości. iOS może zmniejszać obraz do mniejszych miejsc wyświetlania, dzięki czemu większość projektów potrzebuje tylko jednej deklaracji.
Starsze zalecenia wymieniały osiem plików od 57×57 do 152×152, każdy z własnym atrybutem sizes. Te warianty nie są już potrzebne: rozbudowują HTML i wywołują dodatkowe żądania, dając identyczny rezultat.
Plik musi być w formacie PNG. iOS nie odczytuje SVG ani WebP dla tej ikony, a JPEG psuje ostre krawędzie płaskich grafik.
Wybierz nieprzezroczyste tło
Przezroczyste tło może dać nieoczekiwany wynik zależnie od wersji systemu i miejsca wyświetlania. Aby kontrolować wygląd ekranu głównego, przygotuj grafikę na wybranym nieprzezroczystym tle.
Rozwiązaniem jest spłaszczenie ikony na nieprzezroczystym tle przed eksportem. Wybierz kolor marki albo biel, jeśli symbol jest kolorowy, i zostaw około 10% marginesu wokół grafiki.
Nie zaokrąglaj samodzielnie narożników: iOS nakłada własną zaokrągloną maskę. Zaokrąglony już plik daje podwójny promień i nieestetyczne rogi.
Znacznik do wklejenia
Wystarczy jeden wiersz w sekcji head stron: link rel="apple-touch-icon" href="/apple-touch-icon.png". Przy jednym pliku atrybut sizes jest opcjonalny.
Opcjonalnie dodaj meta name="apple-mobile-web-app-title" content="Your brand", aby ustawić etykietę pod ikoną. Bez tego znacznika iOS używa tytułu strony, który zwykle jest zbyt długi i zostaje skrócony.
Umieść też kopię pliku w katalogu głównym jako apple-touch-icon.png: podobnie jak favicon.ico, iOS szuka go pod tym adresem, jeśli nie znajdzie znacznika.
Dlaczego ikona nie chce się zaktualizować
iOS mocno buforuje ikonę, a skrót już obecny na ekranie głównym nie zmienia się sam. Aby przetestować nową wersję, usuń skrót, wyczyść dane Safari i ponownie dodaj witrynę.
Jeśli ikony nadal brakuje, sprawdź trzy rzeczy: czy plik zwraca 200 zamiast 404, czy jest podawany z typem image/png i czy nie blokuje go reguła robots.txt lub uwierzytelnianie.
Narzędzie LFFavicon sprawdza dokładnie te przypadki dla dowolnego publicznego adresu URL i pokazuje faktycznie pobraną ikonę.
Źródła pierwotne
Najczęstsze pytania
Czy potrzeba kilku rozmiarów apple-touch-icon?
W większości projektów jeden plik 180×180 o wysokiej rozdzielczości pozwala iOS tworzyć mniejsze wersje. Przetestuj urządzenia objęte zakresem wsparcia.
Czy Android używa apple-touch-icon?
Chrome na Androidzie może użyć jej awaryjnie, ale najpierw odczytuje ikony manifestu aplikacji. Zawsze deklaruj ikony 192×192 i 512×512 w manifeście — to oficjalna metoda.
Czy SVG może być ikoną Apple Touch?
Nie, iOS oczekuje rastrowego PNG dla tego znacznika. Zachowaj SVG dla favicon przeglądarki na komputerze, gdzie zapewnia ostrość i obsługę trybu ciemnego.