Apple Przewodnik po ikonach dotykowych
Gdy ktoś doda Twoją witrynę do ekranu głównego iOS, Safari używa apple-touch-icon, a nie favicon.ico. Wyślij plik PNG o wymiarach 180×180 (lub większy kwadrat, który można skalować w sposób czysty) i połącz go w swoim <head>.
Apple nie stosuje maskowania w nowoczesnych iOS klipów internetowych, tak jak ma to miejsce w przypadku aplikacji natywnych, ale ikona powinna nadal być kwadratowa z bezpiecznymi marginesami — logo powinno być wstawione w przybliżeniu o 10%, aby zaokrąglone rogi nigdy nie przycinały grafiki.
Użyj <link rel="apple-touch-icon" size="180x180" href="/apple-touch-icon.png">. Pojedynczy plik o wymiarach 180×180 obejmuje wszystkie obecne iPhone'y; opcjonalne wpisy 152 × 152 i 167 × 167 pomagają w starszych układach iPada.
Jak to działa
- 1
Eksportuj 180×180 PNG
Z naszego generatora favicon lub narzędzia do zmiany rozmiaru obrazu.
- 2
Prześlij do katalogu głównego witryny
/apple-touch-icon.png obok favicon.ico.
- 3
Dodaj znacznik linku
<link rel="apple-touch-icon" size="180x180" href="/apple-touch-icon.png"> w <head>.
Wypróbuj teraz
Wygeneruj apple-touch-icon
Generator FaviconFAQ
Jaki rozmiar to apple-touch-icon?+
180×180 pikseli dla obecnych iPhone'ów. Eksportuj z wzorca 512×512 lub 1024×1024.
PNG czy ICO dla iOS?+
Tylko PNG. iOS ignoruje .ico dla ikon na ekranie głównym.
Czy nadal potrzebuję favicon.ico?+
Tak — karty i inne przeglądarki nadal korzystają z rozszerzenia .ico. Ikona dotykowa Apple jest dodatkiem.