iPhone favicon – ikonka pre vašu stránku

Každý dobrý webdizajnér používa favicony pre svoje weby. Ale vedeli ste, že existujú aj špeciálne favicony pre iPhone? Ukážeme si, ako si rýchlo a jednoducho vytvoríte špeciálnu ikonku pre váš web. Stále viac ľudí totiž surfuje cez iPhone alebo iPod Touch, tak je múdre na nich myslieť. Zároveň táto ikonka môže slúžiť aj ako vaša prvá „iPhona aplikácia“ :).

Čo je to iPhone favicon?

Klasické favicony sú maličké obrázky formátu 16x16px, ktoré sa zobrazujú pri názve stránky v záložkách v browseri. V modernom webdizajne sú favicony štandardom a keď stránke chýbajú, je to skôr hanba (pozri napr. www.mini.sk).

Možno sa pýtate, aký má teda zmysel favicon pre iPhone, keď browser Safari v iPhone nepodporuje tabové browsrovanie. Význam je veľký, vďaka iPhone ikonke si môžete odkaz na svoju stránku dať na plochu svojho telefónu a práve váš iPhone favicon určí, čo sa vám zobrází na ploche.

Napravo môžete vidieť, ako vyzerá iPhone favicon tohto blogu.

Ako si vytvoriť ikonku pre iPhone?

Na rozdiel od favicon pre klasické prehliadače, sa ikonka pre iPhone robí omnoho jednoduchšie a rýchlejšie.

1. Vytvoríte si ikonku v rozmere 57x57px
   (pri grafike myslite na to, že iPhone ikonke pridá oblé rohy).
2. Uložíte si ju vo formáte PNG s názvom napr.“iphone-icon.png„.
3. Ikonku uploadnite do kmeňového adresára vášho webu.
   Do hlavičky svojej stránku pridáte tento kód:
   <link rel="apple-touch-icon" href="/iphone-icon.png"/>

Na počítači sa vám možno bude zdať favicon príliš veľký, ale iPhone má väčšie 163 ppi, čo je viac ako klasické monitory (72 alebo 96 ppi).

Vytvorte si svoju „prvú aplikáciu“ na iPhone pomocou favicon 🙂

Tak už sme si vytvorili ikonku, poďme si ju dať na plochu iPhonu. Je to jednoduché!

1. Otvorte si napríklad stránku blog.triad.sk na svojom iPhone.
2. Stlačte tlačítko „plus“ dole v browsri. Vyberte možnost „Pridať na plochu“.
3. Na ploche budete mať medzi aplikáciami skratku na stránku, ktorú ste vybrali. Tento obrázok je iPhone favicon.

A môžeme sa tváriť, že máme na ploche svojho iPhonu vlastnú aplikáciu s ikonkou našej stránky :).

Čo sa stane, ak nemáte iPhone favicon

Ak nemáte vytvorený favicon, tak si iPhone urobí „screenshot“ vaše stránky a použije ho automaticky ako ikonku. Je to síce šikovné, ale vôbec to nevyzerá dobre. Porovnajte si to sami :).