Ikona Apple Touch výslovne určuje obrázok použitý pri pridaní webu na domovskú obrazovku iPhonu. Je oddelená od faviconu karty aj od ikon deklarovaných vo webovom manifeste.
Jediný rozmer: 180×180
180×180 pixelov je bežne používaný rozmer pre zdroj vo vysokom rozlíšení. iOS dokáže obrázok zmenšiť podľa potreby, takže vo väčšine projektov stačí jedna deklarácia.
Staršie odporúčania uvádzali osem súborov od 57×57 do 152×152, každý s vlastným atribútom sizes. Tieto varianty už nie sú potrebné: zväčšujú HTML a vytvárajú ďalšie požiadavky bez zmeny výsledku.
Súbor musí byť PNG. iOS pre túto ikonu nečíta SVG ani WebP a JPEG stráca ostrosť jednoliatych farebných plôch.
Uprednostnite nepriehľadné pozadie
Priehľadné pozadie môže podľa verzie systému a kontextu zobrazenia viesť k neočakávanému výsledku. Ak chcete mať vzhľad ikony domovskej obrazovky pod kontrolou, použite kompozíciu so zvoleným nepriehľadným pozadím.
Riešením je pred exportom zlúčiť ikonu s nepriehľadným pozadím. Vyberte farbu značky alebo čistú bielu pri farebnom symbole a okolo kresby ponechajte približne 10 % voľného priestoru.
Rohy sami nezaobľujte: iOS použije vlastnú zaoblenú masku. Už zaoblený súbor vytvorí dvojité zaoblenie s nepeknými rohmi.
Značka na vloženie
V head stránok stačí jediný riadok: link rel="apple-touch-icon" href="/apple-touch-icon.png". Ak poskytujete iba jeden súbor, atribút sizes je voliteľný.
Prípadne pridajte meta name="apple-mobile-web-app-title" content="Votre marque", aby ste určili názov pod ikonou. Bez tejto značky iOS použije názov stránky, ktorý býva príliš dlhý, a skráti ho.
Umiestnite tiež kópiu súboru do koreňového adresára pod názvom apple-touch-icon.png: podobne ako favicon.ico ho iOS hľadá na tejto adrese, ak nenájde značku.
Prečo sa vaša ikona neaktualizuje
iOS intenzívne používa vyrovnávaciu pamäť ikon a odkaz už pridaný na domovskú obrazovku sa sám nezmení. Novú verziu otestujete tak, že odkaz odstránite, vymažete údaje Safari a web pridáte znova.
Ak ikona stále chýba, skontrolujte tri veci: súbor vracia stav 200 namiesto 404, poskytuje sa s typom image/png a neblokuje ho pravidlo robots.txt ani overovanie používateľa.
Kontrola faviconov LFFavicon testuje presne tieto prípady na ľubovoľnej verejnej URL a zobrazí skutočne načítanú ikonu.
Primárne zdroje
Časté otázky
Treba viac rozmerov apple-touch-icon?
Vo väčšine projektov umožňuje súbor 180×180 vo vysokom rozlíšení systému iOS vytvoriť menšie verzie. Otestujte zariadenia, ktoré podporujete.
Používa Android apple-touch-icon?
Chrome na Androide ju môže použiť ako poslednú možnosť, najprv však číta ikony webového manifestu. Ikony 192×192 a 512×512 vždy deklarujte v manifeste, čo je oficiálny postup.
Môžem použiť SVG ako ikonu Apple Touch?
Nie, iOS pre túto značku očakáva rastrové PNG. SVG si ponechajte pre favicon v počítačových prehliadačoch, kde poskytuje ostrosť a podporu tmavého režimu.