Touch Icon: Obrázok webstránky k vašej favicon

od autora: · Publikované · Aktualizované

Pamätám si ako pred rokmi sa webdizajnéri navzájom informovali o existencií favicon pre svoje stránky. Malý obrázok, ktorý prehliadače zobrazujú v kolónke pre adresu. Najprv stačilo mať v roote webu súbor s presným pomenovaním, potom sa do HEAD sekcie montoval LINK s URL na ikonku webu. Málokto vie, že do tohto súboru je možné vložiť viac obrázkov, čo sa najčastejšie používa pre rôzne rozmery ikonky.

Favicon má tvar:

[code]<link rel="shortcut icon" href="https://spravodaj.madaj.net/favicon.ico" />[/code]

Po príchode Safari v iOS prišla potreba „ikonkovať“ odkazy na webstránky, ktoré sa dajú ukladať na plochu (Springboard) iOS. Apple však nepoužil favicon a rovno sa spolieha na svoj vlastný LINK v HEAD sekcií. Ten má nasledujúci tvar:

[code]<link rel="apple-touch-icon" href="http://www.madaj.net/spravodaj.png" type="image/png" />[/code]

Zápis je koniec koncov štandardný, evidentne sa s ničím nebije. Na diskusiu je prečo Apple pri neexistencií „jeho“ ikonky sa nepokúsi spracovať favicon. Ako u favicon aj Apple ikonku používa ďalší software pre svoje vlastné účely. V skutočnosti ani nemusí mať nič spoločné s pôvodným určením.

Príkladom, ktorý používam, je čítačka Reeder pre iOS. Pokiaľ ju poznáte, zobrazuje zdroje ako obdĺžnikové plochy. Pokiaľ má web favicon, tak sa zobrazí v rohu. No Spravodaj a iné weby majú plochu vyplnenú obrázkom. To spôsobuje práve Apple ikonka popísaná vyššie.

Ja osobne som urobil svoju prvú apple ikonku s rozmermi 158x158px a ako PNG. Podľa usmernení Apple by však mali mať rozmery 57x57px (nízke rozlíšenie prvých iPhone), 72x72px pre iPad alebo 114x114px pre Retinu. Pochopiteľne nejde si vybrať naraz viacej ako je tomu špeciálne u .ico formátu favicon. Špeciálne Reeder potom nevyplní celú plochu ikonkou s malými rozmermi. Nakoniec ale moje rozmery fungujú dobre a aj iOS to predýcha a urobí na Springboarde resamplovanú ikonku webu.

Niektoré zdroje tvrdia, že ikonka už musí mať zaokrúhlené rohy a lesk svetla. Zároveň uvádzajú, že pre neupravený originál existuje ďalší formát zápisu:

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

Ako obvykle, na pravú mieru uvádza veci dokumentácia. Takže Apple popisuje použitie nasledovne:

Ikonka sa pomenúva Web Clip Icon (doteraz v texte ju volám Touch Icon).

Web Clip sa objavil v iOS 1.1.3 (možnosť uložiť URL zo Safari na plochu Springboard. Súbor apple-touch-icon-precomposed.png je tu od iOS 2.0 a podpora pre viacero ikoniek s rozličnými rozmermi je dostupná pre iOS 4.2 a vyššie. Reálne rozšírenie: prvý model iPhone má iOS 3.1.3 ale jeho rozšírenie je už nízke. Momentálne môžete bez obáv uvažovať s tým, že väčšina iOS prístrojov má iOS 4.2 a vyššie.

Pokiaľ použijete názov apple-touch-icon.png (bez zápisu do HEAD sekcie vašich HTML dokumentov), tak ho iOS použije ako ikonku webu, naviac zaokrúhli rohy a pridá efekt zrkadlenia. Pokiaľ použijete názov apple-touch-icon-precomposed.png, tak Safari ani iOS neuplatní žiadne efekty a použije obrázok ikonky tak ako je pripravený.

Je to podobné ako favicon, umiestnite do rootu webu presne pomenovaný obrázok a to úplne stačí.

Zápis do HEAD sekcie HTML sa použije v prípadoch, keď chcete napríklad dynamicky meniť ikonku v rámci svojho webu. Má teda dve verzie líšiace sa práve tým spracovaním efektami.

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

Či použijete obidve alebo iba jednu verziu, je na vás. Tu sa už dostávame k rôznym rozmerom ikoniek.

[code]<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72×72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114×114" href="touch-icon-iphone4.png" />[/code]

Konečne vidíme syntax podľa dokumentácie. Samozrejme spracovanie parametrov je na danom softwari. Dokumentácia popisuje predpísaný tvar, aký rozlíši a spracuje Safari a iOS. Z praxe, ako je vidieť, si iOS poradí s mojim exotickým rozmerom 158x158px. iOS naviac uprednostňuje (pokiaľ uvediete viacej možností) ikonku „precomposed“, rozmer ideálny pre danú platformu (napr. 72x72px pre iPad). Uprednostní zápis v HEAD pred defaultným súborom v ROOT.

Web clip ikonu umiestnite na svoj web pre lepší vzhľad bookmarku vášho webu na iOS. Malo by vám na tom záležať. Neobmedzuje sa však len na iOS, celkom určite môžu programátori rôznych nástrojov „zneužiť“ dokumentovanú ikonku aj pre svoje účely.

Rozhodne by som na mieste webdizajnéra pripravil defaultný súbor, pomenoval ho apple-touch-icon.png (resp. precomposed verziu) a uložil do root webu.

Tento úkon nezasahuje do webu a okrem výroby obrázku nemá žiadne ďalšie náklady.

Dizajnéri webu, ktorý chce ešte viac podporovať iOS, môžu použiť ďalšie „vychytávky“.

Môže sa Vám ešte páčiť...