Så skapar du en favicon
Storlekarna, formaten och koden du behöver för en favicon som syns överallt.
En favicon är den lilla ikonen i webbläsarens flik, i bokmärken och bredvid din webbplats i Googles sökresultat i mobilen. Saknas den ser webbplatsen ofärdig ut, och en suddig favicon ser ännu sämre ut. Att göra en bra tar bara några minuter.
Börja med rätt grafik
En favicon visas så liten som 16 gånger 16 pixlar, så en hel logotyp med text blir oläslig. Använd en enkel symbol: tecknet från din logotyp, en enda initial eller en tydlig form i din varumärkesfärg. Testa den genom att krympa den till en fjärdedel av storleken på skärmen. Ser du fortfarande vad det är kommer den att fungera.
Utgå från en kvadratisk bild på minst 512 gånger 512 pixlar, helst en PNG med transparent bakgrund. Om din logotyp inte är kvadratisk kan du beskära den till en kvadrat med förhållandet låst till 1:1.
Filerna du behöver
| Fil | Storlek | Används av |
|---|---|---|
| favicon.ico | Innehåller versioner på 16, 32 och 48 pixlar | Webbläsare, äldre system och standardförfrågan efter /favicon.ico |
| En PNG-ikon | 32 gånger 32 och 192 gånger 192 | Moderna webbläsare, hemskärmar i Android |
| apple-touch-icon.png | 180 gånger 180 | Bokmärken på hemskärmen i iPhone och iPad |
Google Sök använder också din favicon i sökresultaten. Den måste vara kvadratisk, minst 48 gånger 48 pixlar och gå att genomsöka på din webbplats.
Skapa ICO-filen
Släpp in din kvadratiska PNG i konverteraren PNG till ICO. Den skapar en riktig .ico-fil med de små storlekar som webbläsare frågar efter. För PNG-versionerna ändrar du storlek på samma kvadratiska bild till 180, 192 och 32 pixlar.
Lägg till den på din webbplats
Ladda upp favicon.ico till webbplatsens rotmapp så att den nås på dinwebbplats.se/favicon.ico, och lägg till de här raderna i head-delen på dina sidor:
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" type="image/png" href="/sv/icon-192.png" sizes="192x192"> <link rel="apple-touch-icon" href="/sv/apple-touch-icon.png">
I WordPress går du till Utseende, Anpassa, Webbplatsidentitet och laddar upp en kvadratisk bild som webbplatsikon. WordPress skapar storlekarna åt dig. Shopify, Wix och Squarespace har var och en en inställning för favicon bland webbplatsens eller temats inställningar.
När den nya faviconen inte syns
Webbläsare cachar favicons envist. Öppna webbplatsen i ett privat fönster, eller gå direkt till dinwebbplats.se/favicon.ico och uppdatera. Det kan ta dagar eller veckor innan Google uppdaterar ikonen i sökresultaten, efter att startsidan har genomsökts igen.
Vanliga misstag
- Att använda hela logotypen med liten text, som blir en kladd vid 16 pixlar.
- En vit ikon på transparent bakgrund, som försvinner på ljusa webbläsarflikar.
- Att bara tillhandahålla en pytteliten fil på 16 pixlar, som ser suddig ut på skärmar med hög upplösning.
- Att glömma filen på /favicon.ico, som vissa webbläsare och sökrobotar frågar efter oavsett vad sidan säger.