lillbra.se

Har din sajt en app-ikon för iPhone och Android?

Lägg till på hemskärmen

App-ikoner är de nya fav-ikonerna! Om en smartphone-användare gillar din sajt så kan han/hon välja att bokmärka den genom “Add to Home Screen”, eller “Lägg till på hemskärmen”.
Då skapas ett bokmärke på hemskärmen, som ser ut som en vanligt app, med tillhörande app-ikon. Om din sajt inte har någon app-ikon så skapar telefonen en liten skärmdump som används istället – inte särskilt snyggt. Men detta är snabbt åtgärdat!

För att din sajt ska få en app-ikon i iPhone eller iPad skapar du en bild som du sedan hänvisar till i din html-kod. I head-taggen lägger du in en link med rel-attributet apple-touch-icon:

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

Eftersom de olika varianterna av iPhone och iPad har olika upplösning måste man skapa ikoner med olika storlekar. Bilderna ska ha följande mått, enligt Apples egna dokumentation:

  • iPhone 3GS: 57×57 pixlar
  • iPhone 4: 114×114 pixlar
  • iPad: 58×58 pixlar

Vad jag erfar så räcker det dock med de två översta – iPaden använder verkar använda den största. Måtten anges i ett sizes-attribut. Det fullständiga exemplet ser alltså ut så här:

<link rel="apple-touch-icon" href="/images/touch-icon-small.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/images/touch-icon-big.png" />

Apple lägger automatiskt till glans och rundade hörn på din ikon. Här ser du ett exempel på hur en ikon ser ut i original, jämfört med hur den visas på användarens hemskärm:

Ikonen i original och på Home Screen

Om du inte vill ha glans och runda hörn på din ikon kan du lägga till ordet precomposed i rel-attributet. Då visas ikonen i sitt originalutseende (via Sarah Parmenter):

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

Men, kanske någon undrar, hur gör man då för Android-mobiler? Svaret är enkelt: Man kan göra likadant! Android stöder nämligen också apple-touch-icon-precomposed, så om du använder det kommer din ikon alltså användas för majoriteten av smartphoneanvändare.

Vill du veta ännu mer om att skapa ikoner för iOS? Läs vidare på: How to Design App Icons for iPhone and iPad.

ps. För att uppmärksamma användaren om att de kan bokmärka/lägga till din sajt på hemskärmen kan jag tipsa om add2home.js (via Emil Stenström). Det är ett litet script som öppnar upp ett meddelande i närheten till “Add to Home Screen”-knappen för att upplysa användaren hur de bokmärker din sajt. Snyggt!

Mer på lillbra.se om: , , , , ,

Andra bloggar om om: , app, favicon, ikoner, ipad, iphone

6 kommentarer till “Har din sajt en app-ikon för iPhone och Android?”

  1. Micke says:

    Superbra tips, tack!

  2. Sofia S says:

    Tack för tips!

    Jag undrar dock om man inte kan lägga till kod för att kontrollera om de kommer till sidan via bokmärket på hemskärmen.
    Jag vill att de som redan har sparat den som bokmärke skall slippa få upp bubblan varje gång.
    Går det tro?

    /Sofia

  3. Jonatan Larsson says:

    Sofia: Jag tror inte det. Men man kan ju sätta en cookie när bubblan har visats en gång, så att den inte kommer upp fler ggr – för alla användare.

  4. PeO says:

    Lägg till detta script i taggen så visas bubblan inte om du redan lagt till bokmärket på hemskärmen. Detta kräver dock att du kodar sidan att köra i standalone-mode (googla om det är oklart)

    if (‘standalone’ in navigator && !navigator.standalone && (/iphone|ipod|ipad/gi).test(navigator.platform) && (/Safari/i).test(navigator.appVersion)) {
    document.write(”);
    document.write(”);
    }

    mvh PeO

  5. PeO says:

    Funkade visst inte så bra att klistra in kod… så här kommer en länk istället… hoppas den funkar =)
    http://cubiq.org/add-to-home-screen

  6. Jonatan Larsson says:

    Tack för tipset PeO!

Kommentera

Rullar på Wordpress med modifierat Guerrilla-tema