E-handelsekspert
Hvad er favicon? Eksempel, opsætning og fejlfinding
Et favicon er hjemmesidens lille ikon. Se et HTML-eksempel, forskellen på favicon og logo, og hvad du gør, hvis browseren viser det gamle ikon.
- Forfatter
- Kasper Stück
- Dato
- Læsetid
- 3 min
- Niveau
- Begynder
Et favicon er et lille ikon, som repræsenterer en hjemmeside. Du ser det blandt andet på browserfaner og ved gemte bogmærker. Det kan også indgå i andre visninger af hjemmesiden.
For en webshop hjælper ikonet kunden med at genkende siden, når der er mange faner åbne. Det er en lille del af den visuelle identitet, men det skal stadig fungere i meget små størrelser.
Hvad gør et favicon genkendeligt?
Vælg et enkelt symbol eller et kort bogstavmærke. Et helt logo med navn og slogan bliver ofte ulæseligt, når det skaleres ned.
Test motivet på både lys og mørk baggrund. Tynde streger og små detaljer kan forsvinde, selv om ikonet ser godt ud i en stor billedfil.
Hvordan tilføjes det?
Hjemmesiden henviser til ikonfilen fra sidens HTML. De konkrete filformater og størrelser afhænger af de browsere og anvendelser, du vil understøtte.
Et browserikon og et ikon til en genvej på telefonens hjemmeskærm kan have forskellige behov. Brug derfor platformens dokumentation, og kontrollér, hvad temaet allerede genererer, før du tilføjer ekstra filer.
Eksempel på et favicon i HTML
På en hjemmeside, hvor du selv styrer HTML, kan henvisningen se sådan ud:
<link rel="icon" href="/favicon.svg" type="image/svg+xml">Filen skal findes på den angivne adresse. I et webshoptema skal du først undersøge temaets ikonindstilling, så du ikke ender med flere modstridende henvisninger.
| Symptom | Kontrollér først |
|---|---|
| Intet ikon i fanen | Kan ikonets URL åbnes, og findes henvisningen i HTML? |
| Et gammelt ikon vises | Er den rigtige fil publiceret, og bruger browseren en cached udgave? |
| Ikonet er utydeligt | Kan motivet aflæses i en lille browserfane på både lys og mørk baggrund? |
| Browseren viser ikonet, men Google gør ikke | Opfylder det Googles krav, og kan Google hente filen? |
Kan det vises i Google?
Google har særskilte retningslinjer for favicons i søgeresultater. Ikonet skal blandt andet være tilgængeligt for Google, og visning er ikke garanteret. Se Googles favicon-dokumentation.
Et favicon erstatter ikke produktbilleder, Open Graph-data eller strukturerede data. De beskriver andre aspekter af hjemmesiden.
Sådan kontrollerer du resultatet
Åbn webshoppen i flere browsere og på telefonen. Se på fanen, gem et bogmærke, og kontrollér, om ikonet er tydeligt i den faktiske størrelse.
Hvis det gamle ikon bliver ved med at dukke op, kan browseren have gemt det. Undersøg den aktive filhenvisning og cache, før du ændrer motivet igen.
Sørg også for, at ikonets udtryk passer til webshoppen efter et navne- eller designskifte. Faviconet er en lille vedligeholdelsesopgave, som kan indgå i den samlede gennemgang beskrevet i guiden til Shopify-SEO.
Relaterede artikler
Hvad er Open Graph? Titler og billeder ved linkdeling
Open Graph beskriver, hvordan en side kan vises ved deling. Forstå de vigtigste felter og se, hvordan du finder fejl i titel, billede og beskrivelse.
Hvad er strukturerede data? Schema til webshops
Strukturerede data beskriver produkter og sider for søgemaskiner. Forstå Schema.org, JSON-LD og sammenhængen mellem synligt indhold og produktdata.
