Mga developer ng web at may-ari ng website ay binibigyang pansin: kailangan mong magtakda ng icon ng bookmark ng iOS na handa sa retina. Ang mga icon ng bookmark ay tinatawag na Apple Touch Icon, at ang mga custom na larawang ito ay nagiging icon na ipinapakita sa home screen ng mga user kapag nag-bookmark sila ng website sa isang iPad, iPhone, o iPod touch sa iOS, o ang panel ng mga bookmark ng Safari para sa OS X.Kung walang custom na apple-touch-icon file set, ang mga user ay makakakuha ng boring at kadalasang pangit na thumbnail ng web page mismo, at nang hindi gumagamit ng retina-ready na icon, ang icon ng mga bookmark ay magmumukhang pixelated at sa pangkalahatan ay kakila-kilabot sa bagong iPad screen.

Narito ang kailangan mong gawin upang lumikha ng isang retina na perpektong Apple Touch Icon para sa anumang website sa ilang madaling hakbang.

1) Lumikha ng Retina-Ready iOS Website Icon

Gumamit ng template o magdisenyo ng sarili mong template. Ginamit ko ang madaling DIY retina icon kit na binanggit sa isang nakaraang post, ito ay isang PSD file na ginagawang madali ang pagdidisenyo ng magandang hitsura ng mga icon ng iOS bilang isang pag-click o dalawa. Mag-paste sa isang website o logo ng kumpanya at handa ka nang pumunta. Kung wala kang mai-edit na mga PSD file, ang Photoshop CS6 beta ay mahusay at libre upang i-download at gamitin hanggang sa lumabas ang huling bersyon sa susunod na taon.

2) I-save bilang PNG at Pangalanan ang Retina Website Bookmark Icon

Ang icon ay dapat na isang PNG, at dapat itong pinangalanang isa sa dalawang bagay. Nag-aalok ang bawat pangalan ng file ng bahagyang naiibang hitsura ng icon gaya ng ipinapakita sa home screen ng mga user:

• “apple-touch-icon.png” ay magdaragdag ng highlight bubble overlay sa icon
• “apple-touch-icon-precomposed.png” ay ipapakita ang icon bilang orihinal na nilikha, nang walang highlight na overlay

Gamitin ang huli -precomposed na opsyon kung gumawa ka ng sarili mong highlight, o kung gusto mong lumabas ang icon na mas flat nang walang ubiquitous bubble na lumalabas sa karamihan ng mga default na icon ng Apple.

3) I-upload ang Website Bookmark Touch Icon sa Base Web Directory

Gumamit ng SFTP client (Kasama sa OS X ang FTP sa Finder, at libre ang CyberDuck o Filezilla) upang kopyahin ang apple-touch-icon.png file sa root web directory. Ito ay karaniwang ang parehong lokasyon kung saan matatagpuan ang pangunahing index file ng mga site. Kapag na-upload na, kumpirmahin na nasa tamang lokasyon ito sa pamamagitan ng pagbubukas ng web browser at pagpunta sa “http://SITEURL.com/apple-touch-icon.png” at tiyaking naglo-load ito.

Narito ang isang halimbawa ng 512×512 retina-ready na icon ng bookmark mula sa OSXDaily.com:

Pansinin na kung wala ang -precomposed na flag, ipapakita ng icon sa itaas ang highlight na bubble. Makikita mo ang pagkakaiba ng dalawa sa pamamagitan ng paghahambing ng aktwal na icon sa ipinapakita sa mga screenshot bilang bookmark.

4) Gumamit ng iOS Device at I-bookmark ang Site

Ito ang pinakamadaling bahagi, kumuha ng iOS device (mas maganda ang iPad 3 para kumpirmahin ang retina aspect) at buksan ang Safari.I-refresh ang web site kung saan mo na-upload ang icon, at pagkatapos ay i-tap ang icon ng arrow at piliin ang "Idagdag sa Homescreen" pangalanan ang bookmark, pagkatapos ay bumalik sa Homescreen upang kumpirmahin na naroon ito.

Sa kabila ng pagiging 512 x 512 pixels, ang icon ng retina ay bababa nang maayos sa mga mas lumang iPhone at non-retina device. Kung gusto mo talaga, maaari mong gamitin ang CSS at HTML upang magpakita ng iba't ibang laki ng mga icon sa iba't ibang device, ngunit talagang hindi ito kinakailangan.

Ngayon kung may nag-bookmark sa iyong web site sa isang iPad na may retina display, mas magiging maganda ang hitsura nito sa kanilang home screen. Iyon lang talaga. At oo, nagsulat na kami noon tungkol sa Apple touch icon, ngunit nararapat na isa pang banggitin ngayon na ang iPad 3 ay nangangailangan ng mas mataas na resolution ng mga icon at graphics.