Sådan får du iOS app icons på dit website

Morten Brunbjerg Bech Morten Brunbjerg Bech

Vi fortsætter mini-føljetonen om responsivt webdesign til mobilen med særligt fokus på æble-apparater.

Når du nu har fået lokket brugeren til at gemme et bogmærke på Home Screen, vil du nok også gerne have, at bogmærket tager sig pænt ud. Som udgangspunk vil iOS bruge et nedskaleret screenshot af websiden og det er ikke nødvendigvis særligt kønt. Men ikonet, der repræsenterer sådan et bogmærke kan sagtens gøres ligeså nydeligt, som ikonet til en native app.

Design dit ikon

Først og fremmest må du naturligvis være i stand til at designe et pænt ikon. Du skal bruge 4 størrelser, for Apple har været så venlige at lave 4 forskellige formater på deres iDevices:

  1. iPhone uden Retina display, iPod Touch (samt Android 2.1+): .png fil i størrelsen 57 × 57 pixels.
  2. Første og anden generations iPad samt iPad Mini: .png fil i størrelsen 72 × 72 pixels.
  3. iPhone med Retina display: .png fil i størrelsen 114 × 114 pixels.
  4. Trediegenerations iPad med Retina display: .png fil i størrelsen 144 × 144 pixels.

Der er dog hjælp at hente til en del af arbejdet.

Photoshop skabelon Pixel-pusher Michael Flarup har skruet en skabelon sammen til Photoshop, der gør brug af Smart Objects til at automatisere processen med at generere de forskellige ikon-størrelser. Skabelonen indeholder også nogle baggrunde og effekter, der er fine som udgangspunkt. Hent skabelonen på appicontemplate.com

PNG optimering Når du har designet dine ikoner, kan det være en god ide at optimere dem, så de fylder mindst muligt. Det er Photoshop nemlig ikke så god til. Til det formål kan du køre dem igennem et af optimeringsværktøjerne TinyPNG eller  Compress PNG.Dernæst skal det udføres i 4 forskellige størrelser.

Eksempel på de 4 ikoner fra min arbejdsplads, Horsens kommunes biblioteker: Ikon til 3. generations iPad med retina display
Ikon til iPhone med retina display
Ikon til 1. generations iPad
Ikon til 1. generations iPhone

Indsæt ikonerne i din webside

iOS Safari kan selv finde ikonerne, hvis du gemmer dem i rodmappen på dit websted og kan leve med at navngive dem på en helt bestemt måde. I så fald skal filerne hedde hhv.:

  1. apple-touch-icon-precomposed.png
  2. apple-touch-icon-72x72-precomposed.png
  3. apple-touch-icon-114x114-precomposed.png
  4. apple-touch-icon-144x144-precomposed.png

Vil du organisere dem i en undermappe, kalde dem  noget andet eller bare være helt sikker på, at en hvilken som helst iOS browser kan finde dem, skal du smide nogle tags ind i elementet. Koden ser således ud:

[code language="html"]

[/code]

Mere om touch icons

Læs evt. mere om touch icons hos belgiske Mathias Bynens, der har lagt et stort stykke arbejde i at undersøge sagen i denne artikel: Everything you always wanted to know about touch icons

Læs også: