estli sledujete dění na serveru ať už prostřednictvím logů anebo měření na straně aplikace, určitě jste si všimli, že mezi nejčastější stránky, které nemůže uživatel najít (chyba 404) patří apple-touch-icon.png, potažmo apple-touch-icon-precomposed.png.

Pokud si projdete logy do detailněji, zjistíte že o tento soubor žádají pouze přístroje s operačním systémem Android a iOS. Jedná se totiž o obrázek či spíše ikonku, kterou si přiřadí většinou dnešních mobilní zařízení ke stránce. Přístroje Apple jí také používají na ploše. V podstatě je to obdoba favicon. Pokaždé, když k vám někdo s tímto zařízením přijde, tak jeho operační systém zkusí existenci souboru apple-touch-icon.png.

V případě, že přístroj tento soubor nenajde, je místo ikonky použit screenshot (náhled) webu. Což není zrovna ideální. Pokud chcete zvláště uživatelům produktů Apple vyjít vstříc, můžete pro ně připravil logo anebo nějakou ikonku, která bude váš web reprezentovat. Formát obrázku musí být PNG. Minimální rozměry jsou 57×57 px (používá se pro iPad mini). Maximální velikost v současné době je 180x180px (pro iPhone 6 Plus). Velikost 192×192 px se používá u Chrome pro Android.

Rozdíl mezi apple-touch-icon.png a apple-touch-icon-precomposed.png

Když zařízení stáhne ikonku z webu, tak jí nejdříve ořízne rohy, aby byla zakulacená a zapadla do celkového konceptu iOS. V souboru apple-touch-icon-precomposed.png už můžete ikonku se zakulacenými rohy připravit. Takže nedojde k případným chybám.

Zápis

Ideální je mít pokryté všechny velikosti a odkazovat na ně z hlavičky stránky. V případě, že požadovaná velikost není nalezena, použije se nejbližší menší varianta

<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="apple-touch-icon-180x180-precomposed.png">
<link rel="icon" sizes="192x192" href="touch-icon-192x192.png">

Pokud zařízení najde v hlavičce HTML stránky tento zápis, tak sáhne přesně po velikosti, kterou potřebuje. Když však zápis chybí tak zkusí soubor stáhnout naslepo a z toho pak vznikají chyb 404 (stránka nenalezena.), které vidíte v logu.