Slik legger du til et favicon på WordPress-nettstedet ditt

Å legge til et favicon i WordPress tar omtrent 30 sekunder: gå til Utseende → Tilpass → Nettstedsidentitet → Nettstedsikon, last opp en 512x512 PNG, og trykk Publiser. Ferdig.

Men hvis det ikke fungerer — eller du vil ha mer kontroll — les videre. Det er noen fallgruver det er verdt å vite om.

Den raske måten: WordPress-tilpasseren

Dette fungerer på alle WordPress-nettsteder som kjører versjon 4.3 eller nyere (utgitt i 2015). Hvis du er på en noenlunde oppdatert versjon, har du dette alternativet.

Steg 1: Åpne tilpasseren

• Gå til Utseende → Tilpass i WordPress-administrasjonspanelet ditt
• Eller klikk «Tilpass» i administratorlinjen mens du ser på nettstedet ditt

Steg 2: Finn Nettstedsidentitet

• Klikk Nettstedsidentitet i tilpasserens sidepanel
• Bla ned til Nettstedsikon

Steg 3: Last opp bildet ditt

• Klikk Velg nettstedsikon
• Last opp et PNG-bilde på minst 512 x 512 piksler
• WordPress genererer automatisk alle de mindre størrelsene den trenger (inkludert 32x32, 180x180 osv.)
• Beskjær hvis du blir bedt om det, og klikk deretter Publiser

Det er alt. WordPress håndterer resten — den oppretter <link>-taggene for nettleserfavicons, Apple touch-ikoner og til og med Windows-fliselementet.

Kodemetoden: Legge til favicon manuelt

Noen ganger holder ikke tilpasseren. Kanskje du bygger et tilpasset tema, eller temaet ditt overstyrer standardoppførselen. Slik legger du det til med kode.

Alternativ A: Plasser filer i temaet ditt

Last opp favicon-filene til temamappens rotkatalog, og legg deretter til dette i temaets 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: Bruk et SVG-favicon

SVG-favicons skalerer perfekt og støtter mørk modus. Legg dette til 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-reserveløsningen er der for Safari, som fortsatt ikke fullt ut støtter SVG-favicons.

Bruk av en plugin (hvis du foretrekker det)

Flere plugins håndterer favicons, men ærlig talt? Den innebygde tilpasseren fungerer fint for de fleste nettsteder. Plugins gir mening hvis du trenger:

• Ulike favicons per side eller innlegg
• A/B-testing av ulike ikoner
• Multisite med per-nettsted-favicons

Populære alternativer inkluderer All in One Favicon og Flavor (tidligere flavicon). Men igjen — prøv tilpasseren først.

WordPress-blokkbaserte temaer (fullstendig nettstedsredigering)

Hvis du bruker et blokkbasert tema som Twenty Twenty-Four eller Twenty Twenty-Five, er prosessen litt annerledes:

1. Gå til Utseende → Redigering
2. Klikk Stiler (halvsirkel-ikonet)
3. Naviger til nettstedets globale stiler
4. Nettstedsikon-innstillingen er fortsatt under Utseende → Tilpass → Nettstedsidentitet

Blokkbaserte temaer bruker fortsatt den samme tilpasseren for faviconet. WordPress har ikke flyttet dette inn i nettstedsredigereren ennå.

Anbefalte favicon-filer

For full dekning, forbered disse filene:

WordPress-tilpasseren håndterer de fleste av disse automatisk når du laster opp et 512x512-bilde. SVG- og ICO-filene må legges til manuelt hvis du ønsker dem.

Feilsøking: Favicon vises ikke

Tøm alt

WordPress-favionproblemer skyldes nesten alltid mellomlagring:

1. Nettleserbuffer: Hard refresh med Ctrl+Shift+R (Windows) eller Cmd+Shift+R (Mac)
2. WordPress-buffer: Hvis du bruker WP Super Cache, W3 Total Cache eller LiteSpeed Cache — tøm den
3. CDN-buffer: Cloudflare, Fastly eller hva du bruker — tøm favicon-URLene
4. Prøv inkognito: Åpner en ren sesjon uten mellomlagrede filer

Sjekk for plugin-konflikter

Noen SEO-plugins og temarammeverk injiserer sine egne favicon-tagger. Hvis du ser dupliserte <link rel="icon">-tagger i sidekildekoden:

1. Vis sidekildekode (Ctrl+U)
2. Søk etter «icon» eller «favicon»
3. Hvis det er duplikater, sjekk hvilken plugin som legger dem til
4. Deaktiver pluginens favicon-funksjon, eller fjern din manuelle kode

Temaoverstyringsproblemer

Noen temaer (spesielt premium-temaer) har sine egne favicon-innstillinger som overstyrer tilpasseren. Sjekk:

• Temaalternativer-panelet for en favicon-innstilling
• Temaets header.php for hardkodede <link rel="icon">-tagger
• Temadokumentasjonen for favicon-instruksjoner

Feilsøking: Google viser feil favicon

Google kan bruke dager til uker på å oppdatere favicons i søkeresultater. Slik fremskynder du det:

Googles favicon-krav

Google har spesifikke regler for å vise favicons i søkeresultater:

• Må være et multiplum av 48px (48x48, 96x96, 144x144)
• Må være kvadratisk
• Må ikke være upassende eller NSFW-innhold
• Må representere nettstedet (ikke et generisk ikon)

Fremskynde oppdateringen

1. Sørg for at faviconet er live og tilgjengelig
2. Åpne Google Search Console
3. Bruk URL-inspeksjon på forsiden
4. Klikk Be om indeksering
5. Vent — det tar vanligvis 1–2 uker

Feilsøking: Favicon vises på skrivebord men ikke på mobil

Mobile nettlesere er mer kresne med favicon-formater:

• iOS Safari: Trenger apple-touch-icon (180x180) — det vanlige faviconet vises ikke på hjemmeskjermen
• Android Chrome: Ser etter manifest.json med ikonreferanser for hjemmeskjermen
• PWA: Trenger både 192x192 og 512x512 ikoner definert i web app-manifestet

Hvis WordPress-nettstedet ditt har et web app-manifest (noen temaer og plugins legger til ett), sørg for at ikonstiene i det er riktige.

Multisite-hensyn

Kjører du WordPress Multisite? Hvert nettsted trenger sitt eget favicon.

• Tilpasseren er per nettsted, så hvert delnettsted kan ha sitt eget ikon
• Nettverksnivåinnstillinger inkluderer ikke et standard-favicon
• Hvis du ønsker et nettverksomfattende standard, legg det til via functions.php i en must-use-plugin (wp-content/mu-plugins/)

Beste praksis

• Start stort: Last opp minst 512x512 — WordPress skalerer ned, aldri opp
• Bruk PNG: Gjennomsiktige bakgrunner fungerer bedre enn JPEG
• Hold det enkelt: Faviconet ditt er bitte lite — komplekse logoer blir uleselige i 16x16
• Test på tvers av nettlesere: Bruk Favicon.im for å verifisere oppsettet ditt
• Versjonér faviconet ditt: Legg til ?v=2 i URLen når du oppdaterer for å omgå bufring

Ofte stilte spørsmål

Hvordan legger jeg til et favicon i WordPress?

Gå til Utseende → Tilpass → Nettstedsidentitet → Nettstedsikon, last opp et 512x512 PNG-bilde, og klikk Publiser. WordPress genererer automatisk alle nødvendige størrelser.

Hvilken størrelse bør et WordPress-favicon ha?

Last opp minst 512 x 512 piksler. WordPress lager automatisk 32x32, 180x180 og andre størrelser. For Google-søkeresultater, bruk multipler av 48px.

Hvorfor vises ikke WordPress-faviconet mitt?

Vanligvis et bufferproblem. Tøm nettleserbufferen, WordPress-buffer-plugin og CDN-buffer. Prøv et inkognitovindu. Sjekk også for plugin-konflikter som forårsaker dupliserte favicon-tagger.

Kan jeg bruke et SVG-favicon i WordPress?

WordPress støtter ikke SVG-opplastinger som standard av sikkerhetsgrunner. Du kan legge til SVG-favicon-støtte manuelt via functions.php-kode, eller bruke en plugin som aktiverer SVG-opplastinger.

Hvordan legger jeg til ulike favicons for lys og mørk modus i WordPress?

Bruk et SVG-favicon med innebygde CSS-mediespørringer for prefers-color-scheme. Legg til SVG-filen manuelt via functions.php siden tilpasseren kun håndterer PNG/ICO-formater.

Referanser

1. Site Icon - WordPress Developer Resources - Offisiell WordPress-dokumentasjon
2. Define a favicon to show in search results - Google Search Central
3. Favicon.im - Favicon-testing og valideringsverktøy