Ikona Apple Touch výslovně určuje obrázek, který se použije, když si návštěvník přidá váš web na plochu iPhonu. Je nezávislá na favicon v kartě i na ikonách deklarovaných ve webovém manifestu.
Jediná velikost: 180×180
180×180 pixelů je běžně používaný rozměr pro zdroj ve vysokém rozlišení. iOS dokáže obrázek zmenšit pro menší místa zobrazení, takže ve většině projektů stačí jediná deklarace.
Starší doporučení uváděla osm souborů od 57×57 do 152×152, každý s vlastním atributem sizes. Tyto varianty už nejsou potřebné: zvětšují HTML a vyvolávají další požadavky při stejném výsledku.
Soubor musí být PNG. iOS pro tuto ikonu nepoužívá SVG ani WebP a JPEG nezachová ostré hrany jednobarevných ploch.
Dejte přednost neprůhlednému pozadí
Průhledné pozadí může podle verze a kontextu zobrazení přinést nečekaný výsledek. Chcete-li mít vzhled ikony na ploše pod kontrolou, připravte ji se zvoleným neprůhledným pozadím.
Řešením je před exportem sloučit ikonu s neprůhledným pozadím. Vyberte firemní barvu nebo čistou bílou, je-li symbol barevný, a kolem kresby nechte přibližně 10 % prostoru.
Rohy sami nezaoblujte: iOS přes ikonu aplikuje vlastní zaoblenou masku. Již zaoblený soubor způsobí dvojí zaoblení s nevzhlednými rohy.
Značka ke vložení
Do head svých stránek stačí vložit jediný řádek: link rel="apple-touch-icon" href="/apple-touch-icon.png". Pokud poskytujete jen jeden soubor, atribut sizes je volitelný.
Případně přidejte meta name="apple-mobile-web-app-title" content="Votre marque", abyste určili text pod ikonou. Bez této značky iOS použije název stránky, který bývá příliš dlouhý, a zkrátí ho.
Kopii souboru také umístěte do kořenového adresáře pod názvem apple-touch-icon.png: podobně jako u favicon.ico ji iOS na této adrese hledá, když nenajde žádnou značku.
Proč se ikona neaktualizuje
iOS ikonu agresivně ukládá do mezipaměti a zástupce již umístěný na ploše se sám nezmění. Novou verzi otestujete tak, že zástupce smažete, vymažete data Safari a web přidáte znovu.
Pokud ikona stále chybí, zkontrolujte tři věci: soubor vrací stav 200 místo 404, je poskytován s typem image/png a neblokuje ho robots.txt ani ověřování přístupu.
Kontrola favicon v LFFavicon testuje přesně tyto případy na libovolné veřejné URL a zobrazí skutečně staženou ikonu.
Primární zdroje
Časté otázky
Potřebuji více velikostí apple-touch-icon?
Ve většině projektů soubor ve vysokém rozlišení 180×180 umožní iOS vytvořit menší varianty. Otestujte zařízení, která váš projekt podporuje.
Používá Android apple-touch-icon?
Chrome na Androidu ji může využít jako poslední možnost, ale nejprve čte ikony z webového manifestu. Ikony 192×192 a 512×512 proto vždy deklarujte v manifestu, což je oficiální postup.
Lze jako ikonu Apple Touch použít SVG?
Ne, iOS pro tuto značku očekává rastrové PNG. SVG použijte pro favicon v desktopových prohlížečích, kde přináší ostrost a podporu tmavého režimu.