Sådan tilføjer du et favicon til din WordPress-side

At tilføje et favicon til WordPress tager cirka 30 sekunder: gå til Udseende → Tilpas → Webstedsidentitet → Webstedsikon, upload en 512x512 PNG, og tryk Publicer. Færdig.

Men hvis det ikke virker — eller du vil have mere kontrol — så læs videre. Der er et par faldgruber, det er værd at kende til.

Den hurtige metode: WordPress Tilpas

Dette fungerer på alle WordPress-sider, der kører version 4.3 eller nyere (udgivet i 2015). Hvis du er på en nogenlunde ny version, har du denne mulighed.

Trin 1: Åbn Tilpas

• Gå til Udseende → Tilpas i dit WordPress-adminpanel
• Eller klik "Tilpas" i adminlinjen, mens du ser din side

Trin 2: Find Webstedsidentitet

• Klik Webstedsidentitet i Tilpas-sidepanelet
• Rul ned til Webstedsikon

Trin 3: Upload dit billede

• Klik Vælg webstedsikon
• Upload et PNG-billede på mindst 512 x 512 pixels
• WordPress genererer automatisk alle de mindre størrelser, det har brug for (herunder 32x32, 180x180 osv.)
• Beskær hvis du bliver bedt om det, og klik derefter Publicer

Det er det. WordPress klarer resten — det opretter <link>-tags til browserfavicons, Apple touch-ikoner og endda Windows tile-billedet.

Kodemetoden: Tilføj favicon manuelt

Nogle gange er Tilpas-metoden ikke tilstrækkelig. Måske bygger du et brugerdefineret tema, eller dit tema tilsidesætter standardadfærden. Sådan tilføjer du det med kode.

Mulighed A: Læg filer i dit tema

Upload dine favicon-filer til dit temas rodmappe, og tilføj derefter dette til dit 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');

Mulighed B: Brug et SVG-favicon

SVG-favicons skalerer perfekt og understøtter mørk tilstand. Tilføj dette til 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-fallbacken er der for Safari, som stadig ikke fuldt understøtter SVG-favicons.

Brug af et plugin (hvis du foretrækker det)

Flere plugins håndterer favicons, men ærligt talt? Den indbyggede Tilpas-funktion fungerer fint til de fleste sider. Plugins giver mening, hvis du har brug for:

• Forskellige favicons per side eller indlæg
• A/B-test af forskellige ikoner
• Multisite med favicons per underside

Populære muligheder inkluderer All in One Favicon og Flavor (tidligere flavicon). Men igen — prøv Tilpas først.

WordPress-bloktemaer (Full Site Editing)

Hvis du bruger et bloktema som Twenty Twenty-Four eller Twenty Twenty-Five, er processen lidt anderledes:

1. Gå til Udseende → Editor
2. Klik Stilarter (halvcirkel-ikonet)
3. Navigér til dit websteds globale stilarter
4. Webstedsikonindstillingen er stadig under Udseende → Tilpas → Webstedsidentitet

Bloktemaer bruger stadig den samme Tilpas til faviconen. WordPress har endnu ikke flyttet dette ind i Side-editoren.

Anbefalede favicon-filer

For komplet dækning skal du forberede disse filer:

WordPress Tilpas håndterer de fleste af disse automatisk, når du uploader et 512x512-billede. SVG- og ICO-filerne skal tilføjes manuelt, hvis du vil have dem.

Fejlfinding: Favicon vises ikke

Ryd alt

WordPress favicon-problemer er næsten altid caching:

1. Browsercache: Hård genindlæsning med Ctrl+Shift+R (Windows) eller Cmd+Shift+R (Mac)
2. WordPress-cache: Hvis du bruger WP Super Cache, W3 Total Cache eller LiteSpeed Cache — tøm den
3. CDN-cache: Cloudflare, Fastly eller hvad du bruger — tøm favicon-URL'erne
4. Prøv inkognito: Åbner en ren session uden cachelagrede filer

Tjek for plugin-konflikter

Nogle SEO-plugins og temaframeworks injicerer deres egne favicon-tags. Hvis du ser duplikerede <link rel="icon">-tags i din sidekildekode:

1. Vis sidekildekode (Ctrl+U)
2. Søg efter "icon" eller "favicon"
3. Hvis der er duplikater, tjek hvilket plugin der tilføjer dem
4. Deaktivér pluginnets favicon-funktion, eller fjern din manuelle kode

Problemer med tematilsidesættelse

Nogle temaer (især premiumtemaer) har deres egne favicon-indstillinger, der tilsidesætter Tilpas. Tjek:

• Temaindstillinger-panelet for en favicon-indstilling
• Temaets header.php for hardkodede <link rel="icon">-tags
• Temadokumentation for favicon-instruktioner

Fejlfinding: Google viser forkert favicon

Google kan bruge dage til uger på at opdatere favicons i søgeresultater. Sådan fremskynder du det:

Googles favicon-krav

Google har specifikke regler for at vise favicons i søgeresultater:

• Skal være et multiplum af 48px (48x48, 96x96, 144x144)
• Skal være kvadratisk
• Må ikke være upassende eller NSFW-indhold
• Skal repræsentere hjemmesiden (ikke et generisk ikon)

Fremskund opdateringen

1. Sørg for at dit favicon er live og tilgængeligt
2. Åbn Google Search Console
3. Brug URL-inspektion på din forside
4. Klik Anmod om indeksering
5. Vent — det tager typisk 1-2 uger

Fejlfinding: Favicon vises på desktop men ikke på mobil

Mobilbrowsere er mere kræsne med favicon-formater:

• iOS Safari: Har brug for apple-touch-icon (180x180) — det normale favicon vises ikke på startskærmen
• Android Chrome: Leder efter manifest.json med ikonreferencer til startskærmen
• PWA: Har brug for både 192x192 og 512x512 ikoner defineret i web app-manifestet

Hvis din WordPress-side har et web app-manifest (nogle temaer og plugins tilføjer et), skal du sørge for at ikonstierne i det er korrekte.

Multisite-overvejelser

Kører du WordPress Multisite? Hvert websted har brug for sit eget favicon.

• Tilpas er per websted, så hvert underwebsted kan have sit eget ikon
• Netværksniveau-indstillinger inkluderer ikke et standard-favicon
• Hvis du vil have et netværksdækkende standard, tilføj det via functions.php i et must-use plugin (wp-content/mu-plugins/)

Bedste praksis

• Start stort: Upload mindst 512x512 — WordPress skalerer ned, aldrig op
• Brug PNG: Gennemsigtige baggrunde fungerer bedre end JPEG
• Hold det enkelt: Dit favicon er bittesmåt — komplekse logoer kan ikke læses ved 16x16
• Test på tværs af browsere: Brug Favicon.im til at verificere din opsætning
• Versionér dit favicon: Tilføj ?v=2 til URL'en ved opdatering for at tvinge cacheopdatering

FAQ

Hvordan tilføjer jeg et favicon i WordPress?

Gå til Udseende → Tilpas → Webstedsidentitet → Webstedsikon, upload et 512x512 PNG-billede, og klik Publicer. WordPress genererer automatisk alle nødvendige størrelser.

Hvilken størrelse skal et WordPress-favicon have?

Upload mindst 512 x 512 pixels. WordPress opretter automatisk 32x32, 180x180 og andre størrelser. Til Googles søgeresultater skal du bruge multipla af 48px.

Hvorfor vises mit WordPress-favicon ikke?

Normalt et cachingproblem. Ryd din browsercache, WordPress cache-plugin og CDN-cache. Prøv et inkognitovindue. Tjek også for plugin-konflikter, der forårsager duplikerede favicon-tags.

Kan jeg bruge et SVG-favicon i WordPress?

WordPress understøtter ikke SVG-uploads som standard af sikkerhedsgrunde. Du kan tilføje SVG-favicon-understøttelse manuelt via functions.php-kode eller bruge et plugin, der aktiverer SVG-uploads.

Hvordan tilføjer jeg forskellige favicons til lys og mørk tilstand i WordPress?

Brug et SVG-favicon med indlejrede CSS-media queries for prefers-color-scheme. Tilføj SVG-filen manuelt via functions.php, da Tilpas kun håndterer PNG/ICO-formater.

Referencer

1. Site Icon - WordPress Developer Resources - WordPress Officiel Dokumentation
2. Define a favicon to show in search results - Google Search Central
3. Favicon.im - Favicon-test- og valideringsværktøj