Apple touch icon

Když jsem začal zapisovat chyby 404, nestačil jsem se divit, kolik požadavků bylo na soubor apple-touch-icon.png a podobné názvy. Hledal jsem, co bych v tomto obrázku mohl mít a proč jej vůbec mít.

Zkontrolujte komentáře. Filip zde uvádí příklad pro Windows, které využívají podobných dat.

K čemu je apple-touch-icon

Pokud vyvíjíte aplikaci pro iOS, ne však nativní, ale webovou, je to ikonka daného programu. Pokud ale vytváříte webové stránky, uživatel si je může připnout na plochu, a zde se využije ikona i u normálních webů.

Protože Apple to musí mít extra

Zatímco standard je použití rel="icon", Apple si musel vymyslet vlastní ikony. Proto zápis je trochu odlišný.

<!-- Standard -->
<link rel="icon" href="apple-touch-icon.png">

<!-- Apple -->
<link rel="apple-touch-icon" href="apple-touch-icon.png">

Hledáme různé velikosti

Aby toho nebylo málo, kromě  hlavní ikony apple někdy požaduje různé velikosti. Jenže to stále nestačí, s příchodem iOS7 se velikosti měnily, a s iOS8 přibyly další. Zde je malá ukázka.

<link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<!-- Pro iOS7 změněno 114x114 -> 120x120 -->
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<!-- Pro iOS7 změněno 144x144 -> 152x152 -->
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
<!-- Pro iOS8 přidáno -->
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6-plus.png">

Vyřešíme to jednou pro vždy

Protože by mě nebavilo sledovat výmysly Apple a jejich změny ve velikostech, stejně tak to měnit na všech webech, udělal jsem jednoduché řešení pomocí htaccessu s jedinou ikonou. Vytvořím si ikonu, kterou mohu použít i pro OpenGraph pro Facebook a jiné sociální sítě, o tom někdy jindy. Třeba ve formátu 300x300px a tu poté vložím do hlavičky

<link rel="icon" href="/styles/images/mojeikona.png">

Pokud nezadáme do hlavičky žádné odkazy na ikonu, Safari hledá následovně:

1. apple-touch-icon-76x76.png, (nebo jinou velikost) 
2. apple-touch-icon.png.

My ale veškeré požadavky pomocí htaccess přesměrujeme na naši ikonu.

RewriteEngine on
RewriteRule ^apple-touch.*\.png$ ./styles/images/mojeikona.png [R=301,L]

Pozor na přesměrování pomocí kódu 301, je to permanentní přesměrování, a prohlížeč si to pamatuje na velmi dlouhou dobu a těžko ho to odnaučíte. Proto použít až v případě, že máme vše správně.

Chci použít jednotlivé obrázky

Pokud chcete definovat pro každý rozměr obrázky zvlášť, odkážu už vás pouze na dokumentaci:

• Specifying a Webpage Icon for Web Clip
• Icon and Image Sizes

---

Máte jiné zkušenosti s ikonami? Podělte se s námi v komentářích