lillbra.se

Bloggposter taggade som ‘favicon’

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: , android , app , favicon , ikoner , ipad , iphone

Så bestämmer du bild för din sajt vid Facebook-delning

När man delar en länk på Facebook så visas en tumnagel eller ikon för url:en. Facebook letar efter en passande bild på den inlänkade sajten och infogar den, vilket ibland kan tyckas aningen slumpmässigt. Men du kan själv styra vilken bild som visas.

Exempel på tumnagelbild vid delning på Facebook

Facebook har skapat OpenGraph, ett metadata-protokoll för att beskriva sidor och relationer på webben. Så för att ange vilken bild Facebook ska använda lägger du in följande meta-tagg i din head-tagg:

<meta property="og:image" content="http://lillbra.se/images/facebook-thumbnail.png"/>

Du måste dessutom specificera namespace för protokollet på detta sätt:

<html xmlns:og="http://ogp.me/ns#">

Bilden du använder ska vara minst 50×50 pixlar stor och ha en ratio på högst 3:1. Filformat som stöds är png, jpeg och gif.

OpenGraph-protokollet har utöver og:image, tre andra egenskaper som är obligatoriska att ha på sidan: title, type och url. Så det fullständiga exemplet ser ut så här:

<html xmlns:og="http://ogp.me/ns#">
<head>
<meta property="og:title" content="Lillbra.se"/>
<meta property="og:type" content="blog"/>
<meta property="og:url" content="http://lillbra.se"/>
<meta property="og:image" content="http://lillbra.se/images/facebook-thumbnail.png"/>

Läs mer om OpenGraph och på vilka sätt Facebook använder det här.

OpenGraph och HTML5-validering

Om du använder HTML5 som doctype (och det gör du väl!?) kommer ovanstående exempel att orsaka valideringsfel. Jag har hittat tre metoder att hantera detta problem:

Antingen kan du se till att endast skriva ut meta-taggarna för Facebook, genom att kontrollera user-agent-strängen. För alla andra besökare serveras alltså valid html utan OpenGraph-element. Ett exempel på hur du gör detta hittar du här.

Ett annat alternativ är att använda det gamla sättet att peka ut bilden med en link-tagg istället för en meta-tagg. Så här:

<link rel="image_src" href="/images/facebook-thumbnail.png" />

Detta sätt rekommenderades innan OpenGraph fanns, men fungerar fortfarande. Hur länge Facebook stöder detta är dock oklart.

Det tredje och sista alternativet är att använda HTML+RDFa – en standard för att använda RDFa (där du kan definiera xml-namespaces) tillsammans med HTML5. Då skriver du så här (via Semantic Overflow 1 & 2):

<!DOCTYPE html>
<html version="HTML+RDFa 1.1" xmlns:og="http://ogp.me/ns#">
<head>
<meta property="og:image" content="http://lillbra.se/images/facebook-thumbnail.png"/>

HTML+RDFa är dock en working draft och W3Cs validator stöder inte HTML+RDFa, och därför kommer du inte kunna validera din kod med den.

Annat att tänka på

Många rapporterar problem med att Facebook inte visar rätt bild, både när man använt OpenGraph och det gamla sättet. Själv har jag inte stött på några problem, bara man följer ovan beskrivna regler. Och Facebook har en egen länk-inspektor där du kan ange en url och få ett resultat på vilken metadata Facebook kan hämta för den sidan. Lycka till!

ps. Om du använder WordPress hittar du en enkel steg-för-steg guide till hur du implementerar OpenGraph här.

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

Andra bloggar om om: , bild , facebook , favicon , html , metadata , rdf

Rullar på Wordpress med modifierat Guerrilla-tema