Blog

Sådan opretter du et iOS ikon til din hjemmeside

Efter jeg relancerede hjemmesiden her med det responsive design, kan jeg se at antallet af mobilbesøgende (særligt fra iOS enheder) er stødt stigende. Hvor er det dejligt!

Det slog mig derfor, at hvis folk bogmærker hjemmesiden her til deres homescreen på iOS enhederne, så vil de blot få vist et preview af selve hjemmesiden som ikon – hvilket tydeligvis ikke vil gøre knappen særlig genkendelig. Derfor lavede jeg et hurtigt ikon for at den lettere kan genkendes, og her kan du se hvordan du også let kan gøre dette:

Først og fremmest skal du selvfølgelig have er ikon du ønsker at bruge. Størrelserne på ikonet til de respektive enheder er:

  • iPhone: 57×57 pixels
  • iPhone (retina): 114×114 pixels
  • iPad: 72×72 pixels
  • iPad (retina): 144×144 pixels

Alternativt kan du lave et ikon i størst mulige størrelse, dvs. 114×114 pixels som bruges på iPad 3, så vil de andre enheder automatisk skalere ikonet til deres skærm. Ulempen er blot at det kræver en lille smule mere (unødvendig) datatrafik i det de tilføjer den til homescreenen, men det er trods alt meget lidt det i sidste ende drejer sig om.

DSHandberg NET - iOS ikon

DSHandberg NET – iOS ikon

Hernæst uploader du ikonet til roden af din hjemmeside.

Nu skal du, i headeren på din hjemmeside, tilføje følgende kode:

<link rel="apple-touch-icon" href="sti/til/dit/billede.png" />

I mit tilfælde hvor billedet ligger i roden af websitet, ser det så sådan ud:

<link rel="apple-touch-icon" href="/apple_icon.png" />

Hvis du samtidig ønsker at angive en standardtitel på ikonet når folk tilføjer det til deres iPhone/iPad, så kan det let gøres med følgende kode det også skal lægges i headeren af websitet:

<meta name="apple-mobile-web-app-title" content="DSHandberg">

Vær dog opmærksom på at der er en begrænsning på 11 tegn i titlen til ikonet.

Tilføjer du nu siden her til din iPhone eller iPad, så vil ikonet som standard se sådan ud:

DSH ikon på iPhone 5

DSH ikon på iPhone 5

1 kommentar

  1. Alex Willum siger:

    Hvor er det fedt at du har fået det lavet ;o)
    Det ser rigtig godt ud ,o)

Skriv et svar

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *