Apple touch icon

Pavel htaccess, HTML

Pokud sledujete stránky, které nebyly nalezeny a vrátí Error 404, mohli jste narazit na požadavky na apple-touch-icon. Dnes si ukážeme k čemu je a proč bychom ji na webu neměli zapomínat.

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:


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

Přidat komentář

Právě odpovídáte na existující komentář. Zrušit

Komentáře

Ryšavý Filip

11.12.2015 14:14

Ahoj Pavle,

nejedná se jen o Apple ale vyžaduje to i Mrkvosoft :-)

<meta name="msapplication-TileColor" content="#123456"/>
<meta name="msapplication-square150x150logo" content="square.png"/>

Jejích "udělátko": http://www.buildmypinnedsite.com/en

Odpovědět

Pavel

http://www.kutac.cz/blog/ 13.12.2015 21:30

Jen si myslím, že pokud Windows nenajdou ten meta, tak obrázek ani nehledají. Ale každopádně díky za informaci. Začnu používat také toto :)

Novinky z blogu

Do Hyundai na interní prohlídku

Jak jsme zavítali do fabriky Hyundai Dymos v Nošovicích na jednu interní exkurzi. Absolvovali bezpečnostním školením, prošli si výrobní halu a také mohli zkusit vyrobit...

Další články