📌 Hur du lägger till en favicon i WordPress: 3 sätt för alla webbplatser

En webbplats utan favicon ser ofärdig ut. En besökare öppnar fem flikar, letar efter din bland dem och hittar den inte eftersom det istället för en ikon finns en grå platshållare från webbläsaren. En liten detalj? Ja. Men det är de små detaljerna som formar intrycket: någon brydde sig om dig eller slängde ihop det i all hast.

WordPress har förenklat tillägget av en webbplatsikon till ett par klick, men ändå känner hälften av webbplatsägarna antingen inte till funktionen eller så stöter de på att faviconen inte visas efter uppladdning. Orsaken är nästan alltid webbläsarens cache eller en felaktig filstorlek.

Här nedan följer tre fungerande sätt att lägga till en favicon i WordPress: via anpassaren (enklast), manuellt via kod och via ett tillägg. Plus en genomgång av storleks- och formatkrav så att ikonen visas överallt: i flikar, bokmärken, på iPhone och Android.

💡 Snabb översikt:

• Vad en favicon är och varför din webbplats behöver en: varumärkesigenkänning, förtroende, fliknavigering
• Filkrav: en kvadratisk bild i standardstorlek, PNG-, ICO- eller SVG-format
• Metod 1: ladda upp via "Webbplats" → Anpassa (2 minuter, inga tillägg)
• Metod 2: manuell inmatning via functions.php eller header.php (för dig som redigerar teman)
• Metod 3: installera tillägget Site Favicon (om anpassaren inte är tillgänglig)
• Vad du ska göra om faviconen inte visas: webbläsarcache, gammal ICO, CDN

Varför din webbplats behöver en favicon och vilka kraven är

En favicon (förkortning av favorite icon) är en liten ikon som webbläsaren visar till vänster om sidans titel i fliken, i bokmärken och i webbhistoriken. En användare med ett dussin öppna flikar hittar din webbplats på en bråkdels sekund, just genom faviconen, inte genom titeltexten.

Den andra funktionen är mindre uppenbar: faviconen bidrar till att bygga ett mikromärke. När någon bokmärker en sida eller lägger till webbplatsen på sin smartphones startskärm är det webbplatsikonen som visas där. Utan en sådan ersätter WordPress den antingen med en grå platshållare eller en skärmdump av sidan, vilket ser slarvigt ut.

Storleks- och formatkrav

Sedan 2014 har WordPress stöd för att ladda upp en webbplatsikon via anpassaren. Kraven är standard:

• Storlek: 512×512 pixlar. WordPress genererar automatiskt nedskalade kopior för webbläsare (32×32, 180×180 för Apple touch-ikon, 192×192 och 512×512 för Android). Du behöver inte ladda upp separata filer för varje upplösning; kärnan gör det själv. Mer om kraven för webbplatsikoner i den officiella WordPress-dokumentationen.
• Format: PNG (rekommenderas), ICO eller SVG. PNG ger bäst kvalitet på retinaskärmar. ICO, ett äldre format för gamla webbläsare, är praktiskt taget onödigt år 2026.
• Vad du ska använda som favicon: en logotyp som är igenkännbar i en kvadrat och läsbar när den skalas ner betydligt. Tre eller fyra bokstäver text på en färgad bakgrund fungerar bättre än en komplex illustration.

Huvudregeln när du förbereder filen: den måste vara kvadratisk. WordPress kommer att tvångsbeskära en icke-kvadratisk bild, och resultatet kanske inte blir som du önskar.

Hur man lägger till en favicon i WordPress: 3 metoder

Metod 1: via anpassaren, den enklaste

Denna metod fungerar på alla moderna versioner av WordPress med ett klassiskt tema. För blockteman (FSE) är vägen något annorlunda; jag visar båda.

Klassiskt tema (anpassaren):

• Logga in i WordPress admin.
• Gå till Utseende → Anpassa.
• Välj avsnittet Webbplatsidentitet. I vissa teman kallas det "Webbplatsinformation" eller "Webbplatsikon och logotyp".
• Leta reda på fältet Webbplatsikon. Klicka på "Välj webbplatsikon" och ladda upp en kvadratisk PNG; WordPress förväntar sig en bild på minst 512×512, enligt dokumentationen.
• Beskär bilden vid behov med den inbyggda redigeraren och klicka på "Spara ändringar".

Blocktema (webbplatsredigeraren, WordPress 5.9+):

Om temat stöder fullständig webbplatsredigering ersätts anpassaren av webbplatsredigeraren. Gå till Utseende → Redigerare, öppna panelen Stilar eller Inställningar, hitta avsnittet Webbplatsikon och ladda upp samma kvadratiska bild. Logiken är densamma, gränssnittet är annorlunda.

Efter att du har sparat öppnar du webbplatsen i ett nytt privat webbläsarfönster; faviconen bör visas i fliken. Om den inte visas omedelbart, få inte panik: webbläsare cachar faviconer aggressivt. Mer om detta i FAQ-avsnittet nedan.

Metod 2: manuellt via functions.php

Ett alternativ för dig som redigerar ett barntema och inte vill förlita dig på anpassaren. Lägg till följande kod i barntemats functions.php eller via tillägget Code Snippets:

1
/**
2
 * Include favicon via wp_head.
3
 * The favicon.png file should be in the root of the child theme.
4
 */
5
add_action( 'wp_head', 'sdstudio_add_favicon' );
6
 
7
function sdstudio_add_favicon() {
8
    $favicon_url = get_stylesheet_directory_uri() . '/favicon.png';
9
    echo '<link rel="icon" href="' . esc_url( $favicon_url ) . '" type="image/png" sizes="512x512">' . "\n";
10
    echo '<link rel="apple-touch-icon" href="' . esc_url( $favicon_url ) . '" sizes="180x180">' . "\n";
11
}

Vad som händer här: kroken wp_head infogar två <link>-taggar i <head> på varje sida. Den första är en standardfavicon för webbläsare, den andra är en Apple touch-ikon för Apple-enheter (iPhone, iPad). Funktionen get_stylesheet_directory_uri() returnerar URL:en till barntemat; faviconen måste placeras där, i temamappens rot.

Att byta namn på filen till favicon.ico är inte nödvändigt. WordPress fungerar utmärkt med PNG, och webbläsare förstår det utan problem. Huvudsaken är en kvadrat i standardstorlek.

Om du länkar faviconen inte från temat utan från webbplatsens rot, ersätt get_stylesheet_directory_uri() med home_url() och justera sökvägen:

1
$favicon_url = home_url( '/favicon.png' );

Efter att du har lagt till koden laddar du upp favicon.png till motsvarande mapp via FTP eller webbhotellets filhanterare. Kontrollera resultatet i ett privat webbläsarfönster.

Metod 3: via ett tillägg

Om anpassaren av någon anledning inte låter dig ladda upp en webbplatsikon (detta händer i anpassade och föråldrade teman), installera tillägget Site Favicon, som är minimalistiskt och gratis. Installera det på standardvägen: Tillägg → Lägg till nytt → sök "Site Favicon" → Installera → Aktivera. Efter aktivering visas menyalternativet Inställningar → Site Favicon i admin, där du kan ladda upp en ikon och se en förhandsvisning direkt.

Ett annat alternativ är All in One SEO. Om SEO-tillägget redan finns på webbplatsen, kontrollera dess inställningar: det finns ett avsnitt för uppladdning av webbplatsikon där som gör samma sak utan ett extra tillägg. Men vi rekommenderar inte att installera en tung SEO-svit bara för en favicon; Site Favicon klarar uppgiften, väger mindre och lägger inte till extra belastning.

Efter att ha ställt in faviconen med någon av de tre metoderna, verifiera att ikonen faktiskt visas: öppna webbplatsen i inkognitoläge och titta på webbläsarfliken.

Videon ovan är en steg-för-steg-demonstration av alla tre metoder på en aktiv WordPress-webbplats. Om du efter läsning fortfarande har tvivel om något av stegen, titta på videon: vid 1:15 visar de uppladdningen via anpassaren, vid 3:40 den manuella metoden.

⁉️🤔 Vanliga frågor

Varför visas inte faviconen efter uppladdning via anpassaren?

I de flesta fall är problemet webbläsarens cache. Faviconer cachas aggressivt; webbläsaren kan hålla den gamla versionen i flera dagar. Öppna webbplatsen i inkognitoläge (Ctrl+Skift+N i Chrome): om ikonen visas ligger problemet verkligen i cachen. Rensa webbläsarens cache eller vänta tills den löper ut naturligt. Den näst vanligaste orsaken är att faviconen laddades upp i ICO-format medan webbläsaren förväntar sig PNG. WordPress sedan version 4.3 föredrar PNG; ladda upp en kvadrat i standardstorlek i PNG, som dokumentationen kräver, så försvinner problemet.

Kan jag använda min logotyp som favicon?

Det kan du och bör du; det är standardpraxis. Men alla logotyper är inte lämpliga. Kontrollera hur din logotyp ser ut i liten skala: om detaljerna smälter samman till en oläslig blob, gör en förenklad version. Ett bra exempel är WordPress-ikonen (W på blå bakgrund): igenkännbar även i mycket liten storlek. En horisontell logotyp med tio bokstäver text blir en grå rand när den skalas ner betydligt; använd endast märket utan texten för faviconen.

Varför kräver WordPress en favicon av just denna storlek?

För WordPress, ja. Kärnan accepterar exakt denna storlek som källa och genererar alla nödvändiga nedskalade kopior automatiskt; den officiella dokumentationen bekräftar minimikravet på 512 px på varje sida. Om du laddar upp en mindre favicon (till exempel 128×128), kommer uppskalning till 512 pixlar att ske med kvalitetsförlust, och på retinaskärmar kommer ikonen att se suddig ut. Undantaget är om du länkar faviconen manuellt via kod (metod 2): då kan du förbereda flera storlekar och ange dem med separata <link>-taggar.

Hur tar jag bort eller ersätter en favicon?

Ersättning görs via samma gränssnitt där du laddade upp den: Anpassa → Webbplatsidentitet → Webbplatsikon → "Ta bort" och ladda sedan upp en ny. Den gamla ikonen kommer att dröja kvar i webbläsarens cache under en tid (upp till flera dagar); detta är normalt. För fullständig borttagning, använd "Ta bort"-knappen i samma gränssnitt, varefter WordPress slutar mata ut favicon-taggar och webbläsaren återgår till den grå platshållaren.

Påverkar en favicon SEO?

Direkt, nej. Google använder inte närvaron eller frånvaron av en favicon som en rankningsfaktor. Indirekt, ja: en webbplats med en favicon ser mer professionell ut, och användare är mindre benägna att förväxla den med konkurrenter när de navigerar mellan flikar. Detta minskar pogo-sticking-frekvensen (att återvända till sökresultaten), vilket sökmotorer tar hänsyn till indirekt. Dessutom visar Google ibland faviconer i mobila sökresultat; ikonen gör snippet mer visuellt framträdande, vilket förbättrar CTR.

Vilken metod du ska välja: en kort algoritm

Om du har ett standardtema med en anpassare, använd metod 1. Det är två klick, och WordPress hanterar allt tekniskt arbete: storleksändring, tagg-generering, Apple- och Android-stöd. Nio av tio WordPress-webbplatser löser favicon-frågan på just detta sätt.

Ett anpassat tema utan stöd för webbplatsikon? Länka den via functions.php (metod 2); koden på tre rader ger dig full kontroll över storlekar och format. Spara tillägget (metod 3) för fall när varken anpassaren eller temaredigering är tillgänglig, till exempel om webbplatsen ligger på en multisite-installation med begränsade behörigheter eller om du arbetar med en builder som inte ger åtkomst till functions.php.

Och viktigast av allt: efter att du har laddat upp faviconen, kontrollera webbplatsen i en ny webbläsares inkognitoläge. Förlita dig inte på ett vanligt fönster; den gamla versionen eller själva platshållaren kan vara cachad där. Ser du ikonen i fliken? Då är du klar.