Nettutviklere og nettstedeiere ta hensyn: du må angi et netthinne-klart iOS-bokmerkeikon. Bokmerkeikonene kalles et Apple Touch Icon, og disse egendefinerte bildene blir ikonet som vises på brukerens startskjerm når de bokmerker et nettsted på en iPad, iPhone eller iPod touch i iOS, eller bokmerkepanelet i Safari for OS X.Uten et tilpasset apple-touch-ikon-filsett vil brukerne få et kjedelig og ofte stygt miniatyrbilde av selve nettsiden, og uten å bruke et netthinne-klart ikon vil bokmerkeikonet se pikselert og generelt forferdelig ut på den nye iPad-skjermen.

Her er det du må gjøre for å lage et netthinne-perfekt Apple Touch-ikon for ethvert nettsted med noen få enkle trinn.

1) Lag det netthinne-klare iOS-nettstedets ikon

Bruk en mal eller design din egen. Jeg brukte det enkle DIY retina-ikonsettet nevnt i et tidligere innlegg, det er en PSD-fil som gjør det enkelt å designe fine iOS-ikoner som et klikk eller to. Lim inn en nettside eller firmalogo, og du er ganske god til å gå. Hvis du ikke har noe å redigere PSD-filer på, er Photoshop CS6 beta utmerket og gratis å laste ned og bruke til den endelige versjonen kommer ut senere på året.

2) Lagre som PNG og navngi bokmerkeikonet for Retina-nettstedet

Ikonet må være en PNG, og det må hete en av to ting. Hvert filnavn gir et litt forskjellig utseende på ikonet slik det vises på brukerens startskjerm:

• “apple-touch-icon.png” vil legge til uthevingsbobleoverlegget til ikonet
• “apple-touch-icon-precomposed.png” vil vise ikonet slik det opprinnelig ble opprettet, uten uthevingsoverlegg

Bruk det sistnevnte -forhåndskomponerte alternativet hvis du har laget ditt eget høydepunkt, eller hvis du vil at ikonet skal se flatere ut uten en allestedsnærværende boble som vises på de fleste av Apples standardikoner.

3) Last opp nettstedets bokmerke-berøringsikon til den grunnleggende nettkatalogen

Bruk en SFTP-klient (OS X inkluderer FTP i Finder, og CyberDuck eller Filezilla er gratis) for å kopiere apple-touch-icon.png-filen til rotnettkatalogen. Dette er vanligvis det samme stedet som hovedindeksfilen for nettstedet er plassert. Når den er lastet opp, bekrefter du at den er på riktig plassering ved å åpne en nettleser og gå til "http://SITEURL.com/apple-touch-icon.png" og sørge for at den laster.

Her er et eksempel på et 512×512 netthinne-klar bokmerkeikon fra OSXDaily.com:

Merk at uten det forhåndskomponerte flagget vil ikonet ovenfor vise fremhevingsboblen. Du kan se forskjellen mellom de to ved å sammenligne det faktiske ikonet med det som vises i skjermbilder som bokmerket.

4) Bruk en iOS-enhet og bokmerk nettstedet

Dette er den enkleste delen, ta tak i en iOS-enhet (helst en iPad 3 for å bekrefte netthinnenaspektet) og åpne Safari.Oppdater nettstedet du lastet opp ikonet til, og trykk deretter på pilikonet og velg "Legg til på startskjermen" gi bokmerket et navn, og gå tilbake til startskjermen for å bekrefte at det er der.

Til tross for at det er 512 x 512 piksler, vil netthinneikonet skaleres fint ned på eldre iPhones og enheter uten netthinne. Hvis du virkelig vil, kan du bruke CSS og HTML til å vise ikoner i forskjellige størrelser på forskjellige enheter, men det er egentlig ikke nødvendig.

Nå hvis noen bokmerker nettstedet ditt på en iPad med netthinneskjerm, vil det se mye bedre ut på startskjermen deres. Det er egentlig alt som skal til. Og ja, vi har skrevet om Apple touch-ikonet før, men det fortjener en ny omtale nå som iPad 3 krever betydelig høyere oppløsningsikoner og grafikk.