Så enkelt får du din webbplats att bli snygg på hemskärmen

Som ansvarig för en webbplats vill jag ha snabb och enkel access i min telefon. Inte öppna webbläsare, skriva in url och klicka enter. Dessutom vill jag faktiskt att det ska se lite snyggt ut bland alla andra appar. Även om det bara är en länk till en webbplats, så ska den i alla fall inte vara ful. Varken för mig eller någon annan som placerar den på ”hemskärmen”.

Skärmdump som visar hur ikonen ser ut när telefonen själv ritar upp en miniatyr

FÖRE: iOS 8 ritar själv upp en miniatyr av webbplatsens startsida.

Lösningen är mycket enkel. Vi skapar ikoner i lite olika storlekar, laddar upp dem på webbplatsen och berättar i koden var dessa ikoner finns. Nästa gång du eller någon annan vill lägga till din webbplats till hemskärmen så kommer din telefon eller läsplatta att välja den mest lämpliga ikonen istället för att själv försöka rita upp en miniatyr av din webbplats.

Detta skrivs med någorlunda kännedom om hur iOS (apple-produkter) fungerar och inte så mycket om Android. Men lösningen nedan ska fungera på båda operativsystemen (dubbelkollar nästa gång jag stöter på någon med Android helt enkelt).

Bilden ovan visar hur det såg ut när man tidigare lade till varberg.se till hemskärmen. Innan jag lade till egna ikoner. Inte så snyggt. Bilden nedan visar hur det numera ser ut.

Så här gör du

  1. Skapa din ikon i exempelvis Photoshop. Tänk på att ha ett högupplöst original som du sedan kan skala ner.
  2. Spara ner den i de olika storlekar som används (PNG-formatet rekommenderas). Apple ger dig uppdaterad info om deras enheter här medan Android berättar om sina specifikationer här.
  3. Ladda upp dina ikoner på din webbplats.
  4. Placera in lite kod (exempel nedan) mellan head-taggarna på din webbplats, som berättar vilken sökväg du har till respektive ikon. I exemplet nedan har jag fyra olika storlekar för iOS-enheter med attributet rel=”apple-touch-icon” och två storlekar (normal och högupplöst) för Android-enheter med attributet rel=”icon”.

Exempelkod

<link href="http://www.dinwebbplats.se/apple-touch-icon-76x76.png" rel="apple-touch-icon" sizes="76x76" />
<link href="http://www.dinwebbplats.se/apple-touch-icon-120x120.png" rel="apple-touch-icon" sizes="120x120" />
<link href="http://www.dinwebbplats.se/apple-touch-icon-152x152.png" rel="apple-touch-icon" sizes="152x152" />
<link href="http://www.dinwebbplats.se/apple-touch-icon-180x180.png" rel="apple-touch-icon" sizes="180x180" />
<link href="http://www.dinwebbplats.se/icon-hires.png" rel="icon" sizes="192x192" />
<link href="http://www.dinwebbplats/icon-normal.png" rel="icon" sizes="128x128" />

Skärmdump på hur det ser ut med webbplatsens nya ikon för hemskärmen.

EFTER: Nu visas den ikon som jag själv tillverkat och pekat ut. Givetvis får alla andra som väljer att lägga till din webbplats på sin hemskärm se samma vackra ikon 🙂

Testa

Nu har du laddat upp dina ikoner och berättat sökvägen till dem. Har du redan en länk till din webbplats på hemskärmen så får du ta bort den och lägga till den på nytt.

Vill man veta mer så finns det gott om andra, och ibland mer detaljerade, beskrivningar på hur man går tillväga. Som exempelvis detta blogginlägg – eller så googlar du loss själv! Lycka till. 

Du har läst inlägg nummer tjugo av hundra i utmaningen #blogg100 där Petter och Mattias försöker skriva ett blogginlägg om dagen, hundra dagar i sträck.

 

, , , ,

One Response to Så enkelt får du din webbplats att bli snygg på hemskärmen

  1. www 21 mars, 2015 at 23:45 #

    Överallt står det varberg.se vilket inte fungerar utan www

    Jag tolkar det som att du har valt sida 🙂

    http://www.www.extra-www.org/

    http://no-www.org/

Kommentera