Hvad er et favicon, og hvorfor er det vigtigt for din hjemmeside?

Et favicon (en forkortelse for »favorite icon«) er det lille firkantede billede, der repræsenterer et website i browserfaner, bogmærker, historiklister, Google-søgeresultater, telefoners startskærme og installerede webapps. Det er vigtigt, fordi det giver dit website et genkendeligt ansigt med det samme, gør det lettere at finde blandt mange åbne faner, signalerer at websitet er professionelt og troværdigt, og nu vises ved siden af dit sitenavn i Google-resultater. Uden et favicon ser besøgende et generisk globus- eller tomt sideikon, og din server fylder sine logfiler med 404-fejl. Du kan oprette et komplet favicon-sæt gratis med MakeFav favicon-generatoren.

Hvad er et favicon?

Et favicon er en lille grafik med dit brand, typisk en forenklet version af et logo eller et enkelt bogstav eller symbol, som browsere og anden software henter fra dit website og viser, hvor der er brug for en kompakt visuel identifikator. I en desktopbrowser tegnes det normalt i 16 gange 16 CSS-pixels, men selve filen bør være større, så den forbliver skarp på skærme med høj pixeltæthed.

Teknisk set er et favicon blot en billedfil, der refereres til fra din HTML (eller findes på en standardplacering), og som user agents downloader separat fra sidens indhold. I dag er et »favicon« sjældent én enkelt fil. Et moderne website leverer normalt flere versioner af det samme ikon, så browsere, søgemaskiner, iOS og Android alle får et format og en størrelse, der passer til dem.

Faviconets korte historie

Faviconet stammer fra marts 1999, hvor Microsoft udgav Internet Explorer 5. Browseren lod brugere gemme sider på en »Favoritter«-liste, og den ledte også efter en lille ikonfil ved navn favicon.ico i sitets rod for at vise den ved siden af hver gemt post. Idéen var enkel: Hvis et site udbød /favicon.ico, dukkede ikonet op ved siden af bogmærket.

Andre browsere overtog snart funktionen, og faneblade gjorde den langt mere nyttig. Efterhånden som faner blev den primære måde at navigere på, gik faviconet fra at være bogmærkepynt til at være et centralt navigationshjælpemiddel. Gennem årene udviklede tilgangen sig:

• Begyndelsen af 00'erne: elementet <link rel="icon"> lod sites pege på et ikon på en vilkårlig URL i stedet for kun roden, og PNG- og GIF-filer blev accepteret af browsere uden for IE.
• 2010'erne: Apple introducerede apple-touch-icon til iOS-startskærme, og Android og Windows tilføjede deres egne konventioner såsom manifest-ikoner og tile-billeder.
• I dag: SVG-favicons, web app manifests, ikoner der tilpasser sig mørk tilstand og Googles krav til favicons i søgeresultater har gjort faviconet til en lille, men reel del af et sites tekniske opsætning.

Hvor favicons vises i dag

Dit favicon vises mange flere steder end i browserfanen. De vigtigste er:

• Browserfaner: det mest synlige sted, hvor ikonet ofte er det eneste, du kan se, når mange faner er åbne.
• Bogmærker og favoritter: ikonet står ved siden af sidens titel i bogmærkelinjer og menuer.
• Historik og mest besøgte sider: browsere viser favicons i historiklister og på sider til nye faner.
• Google-søgeresultater: både på mobil og desktop viser Google et sites favicon ved siden af sitenavn og URL.
• Startskærme: når en besøgende føjer dit site til startskærmen på iOS eller Android, bliver touch-ikonet eller manifest-ikonet til app-lignende genvej.
• Installerede PWA'er: en progressive web app bruger ikonerne i sit web app manifest til launcher-ikon, splash-skærm og opgaveskifter.
• Windows-tiles og fastgjorte sites: ældre versioner af Windows og Edge brugte tile-billeder defineret til fastgjorte sites; moderne versioner genbruger for det meste dine standardikoner.
• Linkvisninger i nogle apps: visse chat- og produktivitetsværktøjer (Slack er et kendt eksempel) viser et sites favicon ved siden af et udfoldet link. De fleste forhåndsvisninger bruger primært Open Graph-billeder, men faviconet leverer ofte det lille brandmærke.

Hvorfor et favicon er vigtigt for dit website

Brandgenkendelse

Folk genkender farver og former hurtigere, end de læser tekst. Et konsekvent ikon, der gentages i faner, bogmærker og søgeresultater, opbygger fortrolighed hver gang nogen ser det, hvilket giver gratis brandeksponering ved hvert besøg.

Tillid og troværdighed

Et manglende favicon får et site til at se ufærdigt ud. Et rent, korrekt vist ikon er et lille signal om, at nogen går op i detaljerne, hvilket understøtter indtrykket af, at sitet er legitimt. Det er ikke en sikkerhedsfunktion, og phishingsites kan kopiere ikoner, men et tomt standardikon hjælper sjældent en virksomhed med at fremstå etableret.

Klikrate i søgeresultater

Fordi Google viser faviconet ved siden af din post, bliver det en del af, hvordan dit resultat ser ud ved siden af konkurrenterne. Google offentliggør ingen rangeringseffekt for favicons, og du bør ikke forvente et løft i placeringer. Fordelen handler om visuel genkendelse: Brugere, der kender dit ikon, er mere tilbøjelige til at få øje på og vælge dit resultat, især på mobil, hvor resultaterne er kompakte.

Brugervenlighed med mange åbne faner

Når en browser har tyve faner åbne, er titlerne afkortet til ingenting, og faviconet er alt, der er tilbage. Et markant ikon gør, at folk straks kan finde din fane og vende tilbage til den i stedet for at åbne en dublet eller glemme den.

Professionelt indtryk

Et veldesignet favicon viser den samme opmærksomhed på detaljer som resten af dit site. Uanset om det er produktsider, dokumentation, blogs eller webapps, er det en af de billigste måder at give sitet et professionelt præg.

Tilgængelighed ved fanesøgning

Ikoner hjælper brugere, der scanner visuelt frem for at læse, herunder folk med ordblindhed eller kognitive forskelle, og alle, der skifter hurtigt mellem opgaver. Et ikon med høj kontrast og en enkel form er lettere at udpege. Husk dog, at et favicon er et supplement: Det erstatter ikke en klar sidetitel, som skærmlæsere og hjælpeteknologi er afhængige af.

Hvad sker der, hvis du ikke har et favicon

Browsere anmoder automatisk om /favicon.ico fra roden af dit domæne, selv hvis din HTML ikke nævner et. Hvis filen ikke findes, sker der flere ting:

• Generisk ikon: besøgende ser et standardikon med globus, dokument eller tomt felt i fanen og bogmærkerne, hvilket ser anonymt ud.
• 404-fejl i dine logfiler: hver browser, der beder om filen, genererer en mislykket forespørgsel. På travle sites skaber det støj i adgangslogfiler, fejlovervågning og analyser og kan skjule reelle problemer.
• Intet ikon i Google-resultater: uden et gyldigt favicon, der kan crawles, viser Google sin standardplaceholder ved siden af din post.
• Spildte forespørgsler: browsere kan prøve igen, hvilket giver din server en lille, men meningsløs belastning.

Selv et meget simpelt ikon er bedre end ingen, fordi det fjerner 404-fejlene og giver brugerne noget genkendeligt.

Favicon-formater forklaret

Intet enkelt format dækker alle platforme, så de fleste sites bruger et lille sæt filer.

Ældre Windows-tile-billeder (konfigureret via browserconfig.xml) var nødvendige for Internet Explorer 11 og den gamle Edge. De er sjældent nødvendige nu, medmindre du skal understøtte de miljøer.

Googles retningslinjer for favicons i søgeresultater

Hvis du vil have dit ikon vist i Google Søgning, skal du følge Googles offentliggjorte krav:

• Størrelse: billedet skal være kvadratisk (1:1) og et multiplum af 48 pixels, f.eks. 48x48, 96x96 eller 144x144. Google nedskalerer det derefter til 16x16 ved visning. Den mindste understøttede størrelse er 8x8, men 48x48 eller større anbefales.
• Formater: ethvert format, som browsere understøtter, fungerer, herunder ICO, PNG og SVG.
• Stabil URL: undgå at ændre favicon-URL'en ofte. En stabil adresse hjælper Google med at holde dit ikon opdateret.
• Kan crawles: både favicon-filen og din startside skal være tilgængelige for Googlebot. Bloker dem ikke i robots.txt eller bag et login.
• Én deklaration pr. site: ikonet er knyttet til sitets startside, så placer <link>-tagget i head på din startside.
• Repræsentativt og passende: ikonet skal afspejle dit brand, og Google kan erstatte et stødende eller vildledende ikon med sit standardikon.

Når du har udgivet eller ændret et favicon, kan det tage Google fra dage til uger at crawle og opdatere det igen, så forvent ikke en øjeblikkelig ændring.

Sådan laver du hurtigt et favicon med MakeFav

Du behøver hverken designsoftware eller kommandolinje. MakeFav-generatoren omdanner ét kildebillede til de filer, der er beskrevet ovenfor.

1. Forbered dit grafiske materiale. Brug et kvadratisk logo eller symbol på 512 x 512 px eller større. Enkle former fungerer bedst, fordi ikonet skal ses i 16 px.
2. Upload det på MakeFavs forside, eller åbn editoren for at justere billede, baggrund og margen, før du eksporterer.
3. Se en forhåndsvisning af resultatet i små størrelser og på lyse og mørke baggrunde for at sikre, at det forbliver letlæseligt.
4. Download pakken. Den indeholder ICO, PNG-størrelser, Apple touch icon, manifest-ikoner og HTML-uddraget, du skal indsætte.
5. Upload filerne til roden af dit website, så de kan nås på stier som /favicon.ico.
6. Tilføj HTML'en i <head> på hver side eller i din fælles layoutfil eller skabelon.
7. Verificér med favicon-checkeren, ryd derefter din browsercache og genindlæs for at se det nye ikon.

Eksempel på HTML-uddrag

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-96x96.png" type="image/png" sizes="96x96">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Attributten sizes="48x48" på ICO-linket hjælper browsere med at foretrække SVG, når de understøtter det, mens ICO beholdes som reserve. PNG'en på 96 px opfylder Googles regel om multiplum af 48.

Eksempel på web app manifest

{
  "name": "Example Site",
  "short_name": "Example",
  "icons": [
    { "src": "/web-app-manifest-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" },
    { "src": "/web-app-manifest-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Hvis du arbejder med build-pipelines eller vil automatisere oprettelsen af ikoner, kan du se udviklerressourcerne.

Designtips til et favicon, der virker

• Hold det enkelt. Én form, ét bogstav eller et fedt monogram slår et detaljeret logo, der bliver til grød i 16 px.
• Brug stærk kontrast. Sørg for, at ikonet er synligt på både lyse og mørke browsertemaer. En farvet baggrundsflade hjælper.
• Undgå tekst. Et enkelt forbogstav er fint; ord er ulæselige i denne størrelse.
• Lad der være lidt margen til maskable ikoner og ikoner med afrundede hjørner, så intet vigtigt bliver beskåret.
• Vær konsekvent med dit logo og dine brandfarver, så faviconet styrker genkendelsen.
• Test på rigtige enheder og tjek, hvordan det ser ud i en fane, et bogmærke og et Google-resultat.

Almindelige favicon-problemer

Hvis dit ikon ikke vises, er de sædvanlige årsager caching, forkerte stier og blokerede filer. Browsere cacher favicons aggressivt, så en hård opdatering eller et nyt privat vindue er ofte nok til at se ændringer. Tjek, at filens URL returnerer statuskode 200 og den korrekte content type, og at <link>-tagget står i <head>. Til søgning skal du sikre, at robots.txt ikke blokerer ikonet eller startsiden. MakeFav-checkeren kan hjælpe dig med hurtigt at finde disse problemer.

Ofte stillede spørgsmål

Hvad står favicon for?

Favicon er en forkortelse for »favorite icon«. Navnet stammer fra Internet Explorer 5, som i 1999 første gang brugte en lille ikonfil til at pynte poster på browserens Favoritter-liste. Betegnelsen blev hængende, selvom ikonet nu vises mange andre steder.

Hjælper et favicon på SEO?

Et favicon er ikke en direkte rangeringsfaktor. Det vises dog ved siden af dit sitenavn i Google-resultater på mobil og desktop, så det kan forbedre brandgenkendelsen og din posts visuelle appel, hvilket indirekte kan understøtte klik. Det er ved at følge Googles retningslinjer, at ikonet bliver berettiget til at blive vist.

Hvor stort skal et favicon være?

Til Google Søgning skal du bruge et kvadratisk billede, der er et multiplum af 48 pixels, f.eks. 48x48 eller 96x96. For bredere dækning bør du også levere en ICO-fil, et Apple touch icon på 180x180 og manifest-ikoner på 192x192 og 512x512. En SVG er en god tilføjelse for skalerbarhedens skyld.

Har jeg stadig brug for favicon.ico, hvis jeg bruger PNG eller SVG?

Det er stadig en god idé. Browsere og nogle værktøjer anmoder som standard om /favicon.ico, og ældre software er afhængig af det. At have en ICO-fil i sitets rod forhindrer 404-fejl og giver dig en sikker reserve, når SVG eller PNG ikke understøttes.

Hvorfor opdateres mit favicon ikke?

Browsere og søgemaskiner cacher favicons i lang tid. Prøv en hård opdatering, et privat vindue eller at rydde cachen. Sørg for, at filstien er korrekt, og at den nye fil bliver leveret. I Google Søgning kan det tage dage eller uger, før et ændret ikon bliver crawlet og opdateret.