Sådan laves og indstilles en nethinden-klar iOS-ikon for et websted

Webudviklere og webstedsejere opmærksomme: Du skal indstille et nethøjteklar iOS-bogmærkeikon. Bogmærkeikonerne kaldes et Apple Touch-ikon, og disse brugerdefinerede billeder bliver det ikon, der vises på en brugers startskærm, når de bogmærker et websted på en iPad, iPhone eller iPod touch i iOS eller bogmærkerpanelet i Safari til OS X. Uden et brugerdefineret apple-touch-ikon fil sæt, vil brugerne få en kedelig og ofte grim miniature af selve websiden, og uden at bruge et retina-klar ikon vil bogmærkeikonet se pixeleret og generelt forfærdeligt på den nye iPad skærm.

Her er hvad du skal gøre for at oprette et retina-perfekt Apple Touch-ikon til enhver hjemmeside i et par nemme trin.

1) Opret Retina-Ready iOS Website Icon

Brug en skabelon eller design din egen. Jeg brugte det enkle DIY nethinden ikon kit nævnt i et tidligere indlæg, det er en PSD-fil, der gør det nemt at designe flotte iOS-ikoner som et klik eller to. Indsæt i et websted eller firmas logo, og du er meget god at gå. Hvis du ikke har noget at redigere PSD-filer, er Photoshop CS6 beta fremragende og gratis at downloade og bruge, indtil den endelige version kommer ud senere på året.

2) Gem som PNG & navngiv Retina Website Bookmark Icon

Ikonet skal være en PNG, og det skal betegnes som en af ​​to ting. Hvert filnavn giver et lidt anderledes udseende af ikonet som vist på en brugers startskærm:

  • " Apple-touch-icon.png " vil tilføje højdepunktet bubble overlay til ikonet
  • " Apple-touch-icon-precomposed.png " viser ikonet som oprindeligt oprettet uden højdepunktsoverlejringen

Brug den sidstnævnte forkomponerede valgmulighed, hvis du har oprettet din egen højdepunkt, eller hvis du vil have ikonet til at blive mere fladt uden allestedsnærværende boble, der vises på de fleste af Apples standardikoner.

3) Upload webstedets bogmærke Touch Icon til Base Web Directory

Brug en SFTP-klient (OS X indeholder FTP i Finder, og CyberDuck eller Filezilla er gratis) for at kopiere apple-touch-icon.png-filen til rodwebkataloget. Dette er normalt det samme sted, som hovedindeksfilen er placeret. Når den er uploadet, bekræft den, at den er på den rigtige placering ved at åbne en webbrowser og gå til "http://SITEURL.com/apple-touch-icon.png" og sørg for, at den er påkrævet.

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

Bemærk, at uden ikonet -forventet flag vil ovenstående ikon vise højdepunktsboblen. Du kan se forskellen mellem de to ved at sammenligne det egentlige ikon med det, der vises i skærmbilleder som bogmærket.

4) Brug en iOS-enhed og bogmærker webstedet

Dette er den nemmeste del, tag en iOS-enhed (helst en iPad 3 til at bekræfte nethinden) og åbn Safari. Opdater det websted, du uploadede ikonet til, og tryk derefter på pilikonet, og vælg "Tilføj til hjemmeskærm", navngiv bogmærket, og vend tilbage til startskærmen for at bekræfte, at det er der.

På trods af at det er 512 x 512 pixels, vil nethinden ikonet skalere fint på ældre iPhones og ikke-nethindenheder. Hvis du virkelig vil, kan du bruge CSS og HTML til at vise forskellige størrelse ikoner til forskellige enheder, men det er virkelig ikke nødvendigt.

Nu, hvis nogen bogmærker dit websted på en iPad med en nethinden, vil den se meget bedre ud på deres startskærm. Det er virkelig alt der er til det. Og ja, vi har skrevet om Apple touch-ikonet før, men det fortjener en anden omtale nu, da iPad 3 kræver signifikant højere opløsningsikoner og grafik.