Vad är en favicon och varför är den viktig för din webbplats?

En favicon (förkortning av "favorite icon", alltså favoritikon) är den lilla fyrkantiga bilden som representerar en webbplats i webbläsarflikar, bokmärken, historiklistor, Googles sökresultat, mobilens startskärm och installerade webbappar. Den är viktig eftersom den ger din webbplats ett igenkännbart ansikte i förbifarten, gör den lättare att hitta bland många öppna flikar, signalerar att webbplatsen är professionell och pålitlig, och numera visas bredvid webbplatsens namn i Googles resultat. Utan en favicon ser besökarna en generisk jordglob eller en tom sidikon, och din server fyller sina loggar med 404-fel. Du kan skapa en komplett favicon-uppsättning helt gratis med MakeFavs favicon-generator.

Vad är en favicon?

En favicon är en liten grafisk symbol för ditt varumärke, vanligtvis en förenklad version av en logotyp eller en enskild bokstav eller symbol, som webbläsare och annan programvara hämtar från din webbplats och visar överallt där en kompakt visuell identifierare behövs. I en webbläsare på datorn ritas den oftast ut i 16 × 16 CSS-pixlar, men själva filen bör vara större så att den förblir skarp på skärmar med hög pixeltäthet.

Tekniskt sett är en favicon bara en bildfil som refereras från din HTML (eller hittas på en standardplats) och som användarprogram laddar ner separat från sidans innehåll. Idag är en "favicon" sällan en enda fil. En modern webbplats levererar oftast flera versioner av samma ikon så att webbläsare, sökmotorer, iOS och Android alla får ett format och en storlek som passar dem.

Faviconens korta historia

Faviconen går tillbaka till mars 1999, när Microsoft släppte Internet Explorer 5. Webbläsaren lät användare spara sidor i en lista med "Favoriter", och den letade också efter en liten ikonfil med namnet favicon.ico i webbplatsens rotkatalog för att visa bredvid varje sparad post. Idén var enkel: om en webbplats tillhandahöll /favicon.ico visades ikonen bredvid bokmärket.

Andra webbläsare tog snart upp funktionen, och webbläsning med flikar gjorde den betydligt mer användbar. När flikar blev det huvudsakliga sättet att navigera förvandlades faviconen från en bokmärkesdekoration till ett centralt navigeringsstöd. Med åren har tillvägagångssättet utvecklats:

• Tidigt 2000-tal: elementet <link rel="icon"> gjorde det möjligt för webbplatser att peka på en ikon på vilken URL som helst i stället för bara i roten, och PNG- och GIF-filer började accepteras av andra webbläsare än IE.
• 2010-talet: Apple introducerade apple-touch-icon för iOS-startskärmar, och Android och Windows lade till egna konventioner som manifestikoner och brickbilder.
• Idag: SVG-favicons, webbappsmanifest, ikoner som anpassar sig till mörkt läge och Googles krav på favicons i sökresultat har gjort faviconen till en liten men verklig del av en webbplatss tekniska uppsättning.

Var favicons visas idag

Din favicon visas på många fler ställen än i webbläsarfliken. De viktigaste är:

• Webbläsarflikar: den mest synliga platsen, där ikonen ofta är det enda du kan se när många flikar är öppna.
• Bokmärken och favoriter: ikonen sitter bredvid sidtiteln i bokmärkesfält och menyer.
• Historik och mest besökta sidor: webbläsare visar favicons i historiklistor och på sidan för ny flik.
• Googles sökresultat: både på mobil och dator visar Google en webbplats favicon bredvid webbplatsens namn och URL.
• Startskärmar: när en besökare lägger till din webbplats på startskärmen i iOS eller Android blir touch-ikonen eller manifestikonen en genväg i appstil.
• Installerade PWA:er: en progressiv webbapp använder ikonerna i sitt webbappsmanifest för startikonen, startbilden och aktivitetsväxlaren.
• Windows-brickor och fästa webbplatser: äldre versioner av Windows och Edge använde brickbilder som definierats för fästa webbplatser; moderna versioner återanvänder oftast dina vanliga ikoner.
• Länkförhandsvisningar i vissa appar: vissa chatt- och produktivitetsverktyg (Slack är ett välkänt exempel) visar en webbplats favicon bredvid en uppfälld länk. De flesta förhandsvisningar bygger främst på Open Graph-bilder, men faviconen står ofta för den lilla varumärkesmarkeringen.

Därför är en favicon viktig för din webbplats

Varumärkeskännedom

Människor känner igen färger och former snabbare än de läser text. En enhetlig ikon som upprepas i flikar, bokmärken och sökresultat bygger igenkänning varje gång någon ser den, vilket är gratis varumärkesexponering vid varje besök.

Förtroende och trovärdighet

En saknad favicon får en webbplats att se ofärdig ut. En ren, korrekt återgiven ikon är en liten signal om att någon bryr sig om detaljer, vilket stärker intrycket av att webbplatsen är seriös. Det är ingen säkerhetsfunktion, och nätfiskesajter kan kopiera ikoner, men en tom standardikon hjälper sällan ett företag att framstå som etablerat.

Klickfrekvens i sökresultat

Eftersom Google visar faviconen bredvid din notering blir den en del av hur ditt resultat ser ut jämfört med konkurrenternas. Google publicerar ingen rankningseffekt för favicons, och du bör inte räkna med att ranka högre. Fördelen handlar om visuell igenkänning: användare som känner igen din ikon är mer benägna att upptäcka och välja ditt resultat, särskilt på mobil där resultaten är kompakta.

Användbarhet med många öppna flikar

När en webbläsare har tjugo flikar öppna trunkeras titlarna till ingenting och faviconen är allt som återstår. En tydlig ikon gör att folk hittar din flik direkt och återvänder till den i stället för att öppna en dubblett eller glömma bort den.

Professionellt intryck

En väldesignad favicon visar samma omsorg om detaljer som resten av din webbplats. För produktsidor, dokumentation, bloggar och webbappar är den en av de billigaste finishdetaljerna du kan lägga till.

Tillgänglighet när man ska hitta rätt flik

Ikoner hjälper användare som skannar visuellt snarare än läser, bland andra personer med dyslexi eller kognitiva skillnader, och alla som snabbt växlar mellan uppgifter. En ikon med hög kontrast och enkel form är lättare att urskilja. Kom dock ihåg att en favicon är ett komplement: den ersätter inte en tydlig sidtitel, som skärmläsare och andra hjälpmedel förlitar sig på.

Vad händer om du inte har en favicon

Webbläsare begär automatiskt /favicon.ico från roten av din domän, även om din HTML inte nämner någon. Om filen inte finns händer flera saker:

• Generisk ikon: besökare ser en standardikon i form av en jordglob, ett dokument eller en tom ruta i fliken och bland bokmärkena, vilket ser anonymt ut.
• 404-fel i dina loggar: varje webbläsare som frågar efter filen genererar en misslyckad förfrågan. På välbesökta webbplatser skapar detta brus i åtkomstloggar, felövervakning och analys, och kan dölja verkliga problem.
• Ingen ikon i Google-resultat: utan en giltig favicon som kan genomsökas visar Google sin standardplatshållare bredvid din notering.
• Bortkastade förfrågningar: webbläsare kan försöka igen, vilket ger din server en liten men meningslös extra belastning.

Även en mycket enkel ikon är bättre än ingen alls, eftersom den tar bort 404-felen och ger användarna något igenkännbart.

Favicon-format förklarade

Inget enskilt format täcker alla plattformar, så de flesta webbplatser använder en liten uppsättning filer.

Äldre brickbilder för Windows (konfigurerade via browserconfig.xml) behövdes för Internet Explorer 11 och den gamla versionen av Edge. De behövs sällan numera, om du inte måste stödja dessa miljöer.

Googles riktlinjer för favicons i sökresultat

Om du vill att din ikon ska visas i Google Sök bör du följa Googles publicerade krav:

• Storlek: bilden måste vara kvadratisk (1:1) och en multipel av 48 pixlar, till exempel 48x48, 96x96 eller 144x144. Google skalar sedan ner den till 16x16 för visning. Den minsta storleken som stöds är 8x8, men 48x48 eller större rekommenderas.
• Format: alla format som webbläsare stöder fungerar, inklusive ICO, PNG och SVG.
• Stabil URL: ändra inte favicon-URL:en ofta. En stabil adress hjälper Google att hålla din ikon uppdaterad.
• Genomsökningsbar: både favicon-filen och din startsida måste vara tillgängliga för Googlebot. Blockera dem inte i robots.txt eller bakom en inloggning.
• En deklaration per webbplats: ikonen är knuten till webbplatsens startsida, så placera taggen <link> i head-delen på din startsida.
• Representativ och lämplig: ikonen ska spegla ditt varumärke, och Google kan ersätta en ikon som är stötande eller vilseledande med sin standardikon.

När du har publicerat eller ändrat en favicon kan det ta Google dagar till veckor att genomsöka och uppdatera den på nytt, så räkna inte med en omedelbar förändring.

Så skapar du snabbt en favicon med MakeFav

Du behöver varken designprogram eller kommandorad. MakeFav-generatorn gör om en enda källbild till filerna som beskrivs ovan.

1. Förbered din bild. Använd en kvadratisk logotyp eller symbol på 512 x 512 px eller större. Enkla former fungerar bäst eftersom ikonen kommer att visas i 16 px.
2. Ladda upp den på MakeFavs startsida, eller öppna redigeraren för att justera bild, bakgrund och marginaler innan du exporterar.
3. Förhandsgranska resultatet i små storlekar och på ljusa och mörka bakgrunder för att vara säker på att den förblir läsbar.
4. Ladda ner paketet. Det innehåller ICO, PNG-storlekar, Apple touch icon, manifestikoner och HTML-kodavsnittet att klistra in.
5. Ladda upp filerna till roten av din webbplats så att de nås på sökvägar som /favicon.ico.
6. Lägg till HTML-koden i <head> på varje sida, eller i din delade layout eller mall.
7. Verifiera med favicon-kontrollen, rensa sedan webbläsarens cache och ladda om för att se den nya ikonen.

Exempel på HTML-kodavsnitt

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-96x96.png" type="image/png" sizes="96x96">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Attributet sizes="48x48" på ICO-länken hjälper webbläsare att föredra SVG när de stöder det, samtidigt som ICO behålls som reserv. PNG-filen på 96 px uppfyller Googles regel om multipler av 48.

Exempel på webbappsmanifest

{
  "name": "Example Site",
  "short_name": "Example",
  "icons": [
    { "src": "/web-app-manifest-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" },
    { "src": "/web-app-manifest-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Om du arbetar med byggkedjor eller vill automatisera skapandet av ikoner, se resurserna för utvecklare.

Designtips för en favicon som fungerar

• Håll den enkel. En form, en bokstav eller ett fetstilt monogram slår en detaljerad logotyp som blir till mos i 16 px.
• Använd stark kontrast. Se till att ikonen syns i både ljusa och mörka webbläsarteman. En färgad bakgrundsbricka hjälper.
• Undvik text. En enskild initial går bra; ord är oläsliga i den här storleken.
• Lämna lite marginal för maskable-ikoner och ikoner med rundade hörn så att inget viktigt beskärs.
• Var konsekvent med din logotyp och dina varumärkesfärger så att faviconen förstärker igenkänningen.
• Testa på riktiga enheter och kontrollera hur den ser ut i en flik, ett bokmärke och ett Google-resultat.

Vanliga favicon-problem

Om din ikon inte visas beror det oftast på cachning, felaktiga sökvägar eller blockerade filer. Webbläsare cachar favicons mycket aggressivt, så en hård omladdning eller ett nytt privat fönster räcker ofta för att se uppdateringar. Kontrollera att filens URL returnerar statuskod 200 och rätt innehållstyp, och att taggen <link> finns i <head>. För sök gäller det att se till att robots.txt inte blockerar ikonen eller startsidan. MakeFavs kontroll kan hjälpa dig att snabbt hitta dessa problem.

Vanliga frågor

Vad står favicon för?

Favicon är en förkortning av "favorite icon" (favoritikon). Namnet kommer från Internet Explorer 5, som 1999 först använde en liten ikonfil för att pryda posterna i webbläsarens lista med favoriter. Termen levde kvar trots att ikonen numera visas på många andra ställen.

Hjälper en favicon med SEO?

En favicon är ingen direkt rankningsfaktor. Den visas dock bredvid din webbplats namn i Googles resultat på både mobil och dator, så den kan förbättra varumärkeskännedomen och din notering visuella attraktionskraft, vilket indirekt kan ge fler klick. Det är genom att följa Googles riktlinjer som ikonen blir berättigad att visas.

Hur stor ska en favicon vara?

För Google Sök, använd en kvadratisk bild som är en multipel av 48 pixlar, till exempel 48x48 eller 96x96. För bredare täckning, tillhandahåll även en ICO-fil, en Apple touch icon på 180x180 samt manifestikoner på 192x192 och 512x512. En SVG är ett bra tillskott för skalbarhet.

Behöver jag fortfarande favicon.ico om jag använder PNG eller SVG?

Det är fortfarande en bra idé. Webbläsare och vissa verktyg begär /favicon.ico som standard, och äldre programvara förlitar sig på den. Att ha en ICO-fil i webbplatsens rot förhindrar 404-fel och ger dig en säker reserv när SVG eller PNG inte stöds.

Varför uppdateras inte min favicon?

Webbläsare och sökmotorer cachar favicons under lång tid. Prova en hård omladdning, ett privat fönster eller rensa cachen. Kontrollera att filsökvägen är korrekt och att den nya filen levereras. I Google Sök kan det ta dagar eller veckor innan en ändrad ikon har genomsökts och uppdaterats.