Hvordan lage og sette et retina-klart iOS-ikon for et nettsted

Webutviklere og nettstedseiere må være oppmerksom på: du må sette et netthandsklar iOS-bokmerkeikon. Bokmerkeikonene kalles et Apple Touch-ikon, 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 bokmerkingspanelet til Safari for OS X. Uten et egendefinert apple-touch-ikon filsett vil brukerne få en kjedelig og ofte stygg miniatyrbilde av nettsiden selv, og uten å bruke et netthinnen klarikon, vil bokmerkesymbolet se pikselert og generelt forferdelig på den nye iPad skjerm.

Her er hva du trenger å gjøre for å lage et retina-perfekt Apple Touch-ikon for ethvert nettsted i noen få enkle trinn.

1) Opprett Retina-Klar IOS Website Icon

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

2) Lagre som PNG & Navn Retina Website Bookmark Icon

Ikonet må være en PNG, og det må bli kalt en av to ting. Hvert filnavn gir et litt annerledes utseende av ikonet som vist på brukerens startskjermbilde:

  • " Apple-touch-icon.png " vil legge til høydepunktet bobleoverlegg til ikonet
  • " Apple-touch-icon-precomposed.png " viser ikonet som opprinnelig opprettet, uten høydepunktsoverlegget

Bruk det sistnevnte alternativet hvis du opprettet ditt eget høydepunkt, eller hvis du vil at ikonet skal vises mer flatt uten allestedsnærværende boble som vises på de fleste Apples standardikoner.

3) Last opp nettstedet Bokmerke Trykk ikon til basen webkatalog

Bruk en SFTP-klient (OS X inkluderer FTP i Finder, og CyberDuck eller Filezilla er gratis) for å kopiere apple-touch-icon.png-filen til roten webkatalogen. Dette er vanligvis den samme plasseringen som nettstedets hovedindeksfil ligger. Når du har lastet opp, bekreft at den er på riktig sted ved å åpne en nettleser og gå til "http://SITEURL.com/apple-touch-icon.png" og sørg for at den laster.

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

Legg merke til at uten ikonet -forventet flagg, vil ikonet ovenfor vise høydepunktsboblen. Du kan se forskjellen mellom de to ved å sammenligne det faktiske ikonet til det som vises i skjermbilder som bokmerket.

4) Bruk en iOS-enhet og legg til nettstedet

Dette er den enkleste delen, ta en iOS-enhet (helst en iPad 3 for å bekrefte netthinnen) og åpne Safari. Oppdater nettsiden du lastet opp ikonet til, og trykk deretter på pilikonet og velg «Legg til i hjemmeskjerm» navnet på bokmerket, og gå tilbake til Hjemmeskjermen for å bekrefte at det er der.

Til tross for at det er 512 x 512 piksler, vil netthinnen ikonet skalere fin på eldre iPhones og ikke-retina enheter. Hvis du virkelig vil, kan du bruke CSS og HTML til å vise ikoner med forskjellig størrelse til forskjellige enheter, men det er egentlig ikke nødvendig.

Nå hvis noen bokmerker nettstedet ditt på en iPad med en netthinnen, vil det se mye bedre ut på deres startskjerm. Det er egentlig alt der er til det. Og ja, vi har skrevet om Apple touch-ikonet før, men det fortjener en annen omtale nå da iPad 3 krever betydelig høyere oppløsning ikoner og grafikk.