Apple Touch ikonka pro váš web

3. 9. 2012 | #icons #frontend #nette

Málokterý solidní web dnes neobsahuje favicon, který zpravidla doplňuje svým ztvárněním url v adresním řádku. S tím, jak ale roste podíl mobilních zařízení, je vhodné myslet i na jiné ikonky, které budou reprezentovat vaši aplikaci nebo web.

Rozhodl jsem se, že pro tento blog přidám ikonky pro jablíčková zařízení. Ve zdrojovém kódu si můžete všimnout těchto dvou řádků:

<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png" />

První definice odkazuje na ikonku s glass efektem. Druhá, která má navíc uvedeno precomposed, je na rozdíl od té první, bez tohoto efektu. Obě mají zakulacené rohy. Velikost těchto ikon je 144×144px. Podle všeho tato velikost dostačuje i zařízením jako je iPad a ostatní zařízení si jsou schopny ikonky zmenšit.

Jelikož jsem s tím nechtěl mít příliš práce, pokusil jsem se najít šikovný generátor, který mi s touto prací pomůže. A ze všech kandidátů, jsem objevil tohoto vítěze. Podporuje mnoho stylů, ještě více velikostí a svůj účel adekvátně splní.

Na závěr ještě doplním, jak by vypadala rozšířená definice:

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../ico/apple-touch-icon-57-precomposed.png">

Diskuse

comments powered by Disqus

Tento web používá k poskytování služeb, personalizaci reklam a analýze návštěvnosti soubory cookie. Používáním tohoto webu s tím souhlasíte. Další informace