Ak máte vlastnú webovú stránku alebo ju vyvíjate pre niekoho iného, ​​mali by ste prispôsobiť ikonu uloženej záložky, ktorá sa zobrazí na domovskej obrazovke používateľa iOS. Na snímke obrazovky vyššie uvidíte vlastnú ikonu OSXDaily na obrazovke iPhonu.

Nastavenie ikony Apple Touch Icon je dobrý nápad, pretože v predvolenom nastavení iOS uloží iba malú miniatúru stránky. Malé miniatúry sa často ťažko identifikujú a vo všeobecnosti nevyzerajú tak skvele, preto si namiesto toho nastavme vlastný obrázok favicon.

Ako prispôsobiť a nastaviť dotykovú ikonu Apple pre webovú stránku

• Vytvorte ikonu, uistite sa, že je to štvorec, ten tu na OSXDaily.com má 512 × 512 pixelov, ale ak naozaj chcete, môžete si vybrať aj iné veľkosti štvorca – väčšia je vhodná pre sietnicové displeje
• Uložte ikonu domovskej obrazovky ako súbor PNG a označte ju: apple-touch-icon.png
• Presuňte súbor apple-touch-icon.png do koreňového adresára webového servera, aby bol prístupný na adrese domain.com/apple-touch-icon.png
• Otestujte ikonu záložky na ploche svojich webových stránok tak, že navštívite stránku zo Safari v systéme iOS a potom klepnete na „Pridať na plochu“
• Pozrite sa na domovskú obrazovku zariadenia so systémom iOS a uvidíte tam uloženú záložku s vašou novou vlastnou ikonou, ako je snímka obrazovky vyššie

Pokiaľ je súbor správne pomenovaný a nachádza sa v koreňovom adresári webových serverov, Mobile Safari bude vedieť, čo s ním má robiť, takže nie sú potrebné žiadne ďalšie úpravy, aby sa zobrazila ikona špecifická pre iOS.

Pre referenciu je tu náš vlastný obrázok „apple-touch-icon.png“, ktorý používame pre OSXDaily.com, táto vzorová ikona záložky je vytvorená a má vhodnú veľkosť pre sietnicové displeje ():

Všimnete si, že skutočný súbor ikony nemá lom svetla uložený na ikone, iOS to zvládne sám. Môžete použiť ľubovoľný obrázok, ale odporúčam vám vytvoriť taký, ktorý zachytáva známe používateľské rozhranie existujúcich ikon systému iOS.

To samozrejme nie je to isté ako mať vyhradenú aplikáciu pre iOS, ale slušný mobilný používateľský zážitok z webu je dobrý nápad a vyhýba sa vysokej cene za vývoj aplikácie pre iOS.

A hej, ak vás takéto veci znepokojujú, pravdepodobne používate Photoshop aspoň na navrhovanie ikon, však? Pozrite sa teda na niektoré, keď už budete pri tom.