Hur du lägger till en favicon på din WordPress-webbplats

Att lägga till en favicon i WordPress tar ungefär 30 sekunder: gå till Utseende → Anpassa → Webbplatsidentitet → Webbplatsikon, ladda upp en 512x512 PNG och tryck på Publicera. Klart.

Men om det inte fungerar — eller om du vill ha mer kontroll — fortsätt läsa. Det finns några fallgropar som är bra att känna till.

Det snabba sättet: WordPress Anpassare

Det här fungerar på alla WordPress-webbplatser som kör version 4.3 eller senare (släppt 2015). Om du kör en någorlunda modern version har du det här alternativet.

Steg 1: Öppna Anpassaren

• Gå till Utseende → Anpassa i WordPress adminpanel
• Eller klicka på "Anpassa" i adminbaren när du visar din webbplats

Steg 2: Hitta Webbplatsidentitet

• Klicka på Webbplatsidentitet i Anpassarens sidofält
• Scrolla ned till Webbplatsikon

Steg 3: Ladda upp din bild

• Klicka på Välj webbplatsikon
• Ladda upp en PNG-bild på minst 512 x 512 pixlar
• WordPress genererar automatiskt alla mindre storlekar som behövs (inklusive 32x32, 180x180, osv.)
• Beskär om du blir ombedd och klicka sedan på Publicera

Det är allt. WordPress sköter resten — det skapar <link>-taggarna för webbläsarfavicons, Apple touch-ikoner och till och med Windows-panelbilden.

Kodsättet: Lägga till favicon manuellt

Ibland räcker inte Anpassaren. Kanske bygger du ett anpassat tema, eller ditt tema åsidosätter standardbeteendet. Så här lägger du till det med kod.

Alternativ A: Lägg filer i ditt tema

Ladda upp dina favicon-filer till ditt temas rotkatalog och lägg sedan till detta i ditt temas functions.php:

function custom_favicon() {
    $favicon_url = get_stylesheet_directory_uri();
    ?>
    <link rel="icon" type="image/png" sizes="32x32" href="<?php echo $favicon_url; ?>/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="<?php echo $favicon_url; ?>/favicon-16x16.png">
    <link rel="apple-touch-icon" sizes="180x180" href="<?php echo $favicon_url; ?>/apple-touch-icon.png">
    <?php
}
add_action('wp_head', 'custom_favicon');

Alternativ B: Använd en SVG-favicon

SVG-favicons skalas perfekt och stöder mörkt läge. Lägg till detta i functions.php:

function svg_favicon() {
    $favicon_url = get_stylesheet_directory_uri() . '/favicon.svg';
    ?>
    <link rel="icon" type="image/svg+xml" href="<?php echo $favicon_url; ?>">
    <link rel="icon" type="image/png" sizes="32x32" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon-32x32.png">
    <?php
}
add_action('wp_head', 'svg_favicon');

PNG-reserven finns där för Safari, som fortfarande inte fullt ut stöder SVG-favicons.

Använda ett plugin (om du föredrar det)

Flera plugins hanterar favicons, men ärligt talat? Den inbyggda Anpassaren fungerar bra för de flesta webbplatser. Plugins är meningsfulla om du behöver:

• Olika favicons per sida eller inlägg
• A/B-testning av olika ikoner
• Multisite med favicons per webbplats

Populära alternativ inkluderar All in One Favicon och Flavor (tidigare flavicon). Men igen — prova Anpassaren först.

WordPress blockteman (Full Site Editing)

Om du använder ett blocktema som Twenty Twenty-Four eller Twenty Twenty-Five är processen lite annorlunda:

1. Gå till Utseende → Redigerare
2. Klicka på Stilar (halvcikelikonen)
3. Navigera till din webbplats globala stilar
4. Webbplatsikon-inställningen finns fortfarande under Utseende → Anpassa → Webbplatsidentitet

Blockteman använder fortfarande samma Anpassare för faviconen. WordPress har ännu inte flyttat detta till Webbredigeraren.

Rekommenderade favicon-filer

För komplett täckning, förbered dessa filer:

WordPress Anpassare hanterar de flesta av dessa automatiskt när du laddar upp en 512x512-bild. SVG- och ICO-filerna behöver läggas till manuellt om du vill ha dem.

Felsökning: Favicon visas inte

Rensa allt

WordPress favicon-problem beror nästan alltid på cachning:

1. Webbläsarcache: Tvinga omladdning med Ctrl+Shift+R (Windows) eller Cmd+Shift+R (Mac)
2. WordPress-cache: Om du använder WP Super Cache, W3 Total Cache eller LiteSpeed Cache — rensa den
3. CDN-cache: Cloudflare, Fastly eller vad du nu använder — rensa favicon-URL:erna
4. Prova inkognito: Öppnar en ren session utan cachade filer

Kontrollera plugin-konflikter

Vissa SEO-plugins och temaramverk lägger in egna favicon-taggar. Om du ser dubbla <link rel="icon">-taggar i din sidkälla:

1. Visa sidkällan (Ctrl+U)
2. Sök efter "icon" eller "favicon"
3. Om det finns dubbletter, kontrollera vilket plugin som lägger till dem
4. Inaktivera pluginets favicon-funktion, eller ta bort din manuella kod

Problem med temaöverskridning

Vissa teman (särskilt premiumteman) har egna favicon-inställningar som åsidosätter Anpassaren. Kontrollera:

• Temaalternativ-panelen för en favicon-inställning
• Temats header.php för hårdkodade <link rel="icon">-taggar
• Temadokumentation för favicon-instruktioner

Felsökning: Google visar fel favicon

Google kan ta dagar till veckor att uppdatera favicons i sökresultaten. Så här påskyndar du det:

Googles favicon-krav

Google har specifika regler för att visa favicons i sökresultat:

• Måste vara en multipel av 48px (48x48, 96x96, 144x144)
• Måste vara kvadratisk
• Får inte vara olämpligt innehåll
• Måste representera webbplatsen (inte en generisk ikon)

Påskynda uppdateringen

1. Se till att din favicon är live och tillgänglig
2. Öppna Google Search Console
3. Använd URL-inspektion på din startsida
4. Klicka på Begär indexering
5. Vänta — det tar vanligtvis 1-2 veckor

Felsökning: Favicon visas på desktop men inte på mobil

Mobila webbläsare är mer kräsna med favicon-format:

• iOS Safari: Behöver apple-touch-icon (180x180) — den vanliga faviconen visas inte på hemskärmen
• Android Chrome: Letar efter manifest.json med ikonreferenser för hemskärmen
• PWA: Behöver både 192x192 och 512x512 ikoner definierade i webbappmanifestet

Om din WordPress-webbplats har ett webbappmanifest (vissa teman och plugins lägger till ett), se till att ikonsökvägarna i det är korrekta.

Multisite-överväganden

Kör du WordPress Multisite? Varje webbplats behöver sin egen favicon.

• Anpassaren är per webbplats, så varje underwebbplats kan ha sin egen ikon
• Nätverksnivåinställningar inkluderar inte en standardfavicon
• Om du vill ha en nätverksövergripande standard, lägg till den via functions.php i ett must-use-plugin (wp-content/mu-plugins/)

Bästa praxis

• Börja stort: Ladda upp minst 512x512 — WordPress skalar ned, aldrig upp
• Använd PNG: Transparenta bakgrunder fungerar bättre än JPEG
• Håll det enkelt: Din favicon är liten — komplexa logotyper fungerar inte i 16x16
• Testa i alla webbläsare: Använd Favicon.im för att verifiera din konfiguration
• Versionera din favicon: Lägg till ?v=2 till URL:en vid uppdatering för att kringgå cache

Vanliga frågor

Hur lägger jag till en favicon i WordPress?

Gå till Utseende → Anpassa → Webbplatsidentitet → Webbplatsikon, ladda upp en 512x512 PNG-bild och klicka på Publicera. WordPress genererar automatiskt alla nödvändiga storlekar.

Vilken storlek ska en WordPress-favicon vara?

Ladda upp minst 512 x 512 pixlar. WordPress skapar automatiskt 32x32, 180x180 och andra storlekar. För Googles sökresultat, använd multiplar av 48px.

Varför visas inte min WordPress-favicon?

Vanligtvis ett cachningsproblem. Rensa webbläsarcache, WordPress cache-plugin och CDN-cache. Prova ett inkognitofönster. Kontrollera även plugin-konflikter som orsakar dubbla favicon-taggar.

Kan jag använda en SVG-favicon i WordPress?

WordPress stöder inte SVG-uppladdningar som standard av säkerhetsskäl. Du kan lägga till SVG-favicon-stöd manuellt via functions.php-kod, eller använda ett plugin som aktiverar SVG-uppladdningar.

Hur lägger jag till olika favicons för ljust och mörkt läge i WordPress?

Använd en SVG-favicon med inbäddade CSS media queries för prefers-color-scheme. Lägg till SVG-filen manuellt via functions.php eftersom Anpassaren bara hanterar PNG/ICO-format.

Referenser

1. Site Icon - WordPress Developer Resources - WordPress officiell dokumentation
2. Define a favicon to show in search results - Google Search Central
3. Favicon.im - Verktyg för att testa och validera favicons