Hva er et favicon, og hvorfor er det viktig for nettstedet ditt?

Et favicon (kort for «favorite icon», altså favorittikon) er det lille, kvadratiske bildet som representerer et nettsted i nettleserfaner, bokmerker, historikklister, Google-søkeresultater, på startskjermen på mobilen og i installerte nettapper. Det er viktig fordi det gir nettstedet ditt et gjenkjennelig ansikt med et raskt blikk, gjør det lettere å finne siden blant mange åpne faner, signaliserer at nettstedet er profesjonelt og pålitelig, og nå vises ved siden av nettstedsnavnet ditt i Google-resultater. Uten et favicon ser besøkende et generisk globus- eller blankt sideikon, og serveren din fyller loggene med 404-feil. Du kan lage et komplett favicon-sett gratis med MakeFav favicon-generatoren.

Hva er et favicon?

Et favicon er en liten grafikk med merkevareidentitet, som oftest en forenklet versjon av en logo eller en enkelt bokstav eller et symbol, som nettlesere og annen programvare henter fra nettstedet ditt og viser overalt der de trenger en kompakt visuell identifikator. I en nettleser på datamaskin tegnes det vanligvis i 16 × 16 CSS-piksler, men selve filen bør være større slik at den holder seg skarp på skjermer med høy tetthet.

Teknisk sett er et favicon bare en bildefil som det refereres til fra HTML-koden din (eller som ligger på en standardplassering), og som nettleserne laster ned separat fra sideinnholdet. I dag er et «favicon» sjelden én enkelt fil. Et moderne nettsted leverer vanligvis flere versjoner av det samme ikonet, slik at nettlesere, søkemotorer, iOS og Android alle får et format og en størrelse som passer dem.

Faviconets korte historie

Faviconet stammer fra mars 1999, da Microsoft ga ut Internet Explorer 5. Nettleseren lot brukerne lagre sider i en «Favoritter»-liste, og den lette også etter en liten ikonfil som het favicon.ico i roten av nettstedet for å vise ved siden av hver lagrede oppføring. Ideen var enkel: hvis et nettsted tilbød /favicon.ico, dukket ikonet opp ved siden av bokmerket.

Andre nettlesere tok snart i bruk funksjonen, og faner gjorde den langt mer nyttig. Etter hvert som faner ble den viktigste måten å navigere på, gikk faviconet fra å være bokmerkepynt til å bli et sentralt navigasjonshjelpemiddel. Gjennom årene har tilnærmingen utviklet seg:

• Tidlig på 2000-tallet: elementet <link rel="icon"> lot nettsteder peke til et ikon på en vilkårlig URL i stedet for bare roten, og nettlesere utenom IE begynte å akseptere PNG- og GIF-filer.
• 2010-tallet: Apple introduserte apple-touch-icon for iOS-startskjermer, og Android og Windows la til sine egne konvensjoner, som manifest-ikoner og flatebilder (tiles).
• I dag: SVG-favicon, web app-manifester, ikoner som tilpasser seg mørk modus og Googles krav til favicon i søkeresultater har gjort faviconet til en liten, men reell del av et nettsteds tekniske oppsett.

Hvor favicon vises i dag

Faviconet ditt vises på langt flere steder enn nettleserfanen. De viktigste er:

• Nettleserfaner: det mest synlige stedet, der ikonet ofte er det eneste du ser når mange faner er åpne.
• Bokmerker og favoritter: ikonet står ved siden av sidetittelen i bokmerkelinjer og menyer.
• Historikk og mest besøkte sider: nettlesere viser favicon i historikklister og på siden for ny fane.
• Google-søkeresultater: både på mobil og datamaskin viser Google nettstedets favicon ved siden av nettstedsnavnet og URL-en.
• Startskjermer: når en besøkende legger nettstedet ditt til på startskjermen på iOS eller Android, blir touch-ikonet eller manifest-ikonet til en app-lignende snarvei.
• Installerte PWA-er: en progressiv nettapp bruker ikonene i web app-manifestet sitt til oppstartsikonet, splash-skjermen og oppgavebytteren.
• Windows-flater og festede nettsteder: eldre versjoner av Windows og Edge brukte flatebilder definert for festede nettsteder, mens moderne versjoner stort sett gjenbruker de vanlige ikonene dine.
• Lenkeforhåndsvisninger i enkelte apper: visse chat- og produktivitetsverktøy (Slack er et velkjent eksempel) viser nettstedets favicon ved siden av en utvidet lenke. De fleste forhåndsvisninger baserer seg hovedsakelig på Open Graph-bilder, men faviconet leverer ofte det lille merkesymbolet.

Hvorfor et favicon er viktig for nettstedet ditt

Gjenkjenning av merkevaren

Folk gjenkjenner farger og former raskere enn de leser tekst. Et konsekvent ikon som gjentas i faner, bokmerker og søkeresultater bygger kjennskap hver gang noen ser det, og det er gratis merkevareeksponering ved hvert besøk.

Tillit og troverdighet

Et manglende favicon får et nettsted til å se uferdig ut. Et rent, riktig gjengitt ikon er et lite signal om at noen bryr seg om detaljer, noe som støtter oppfatningen av at nettstedet er seriøst. Det er ikke en sikkerhetsfunksjon, og svindelsider kan kopiere ikoner, men et blankt standardikon hjelper sjelden en bedrift med å virke etablert.

Klikkrate i søkeresultater

Fordi Google viser faviconet ved siden av oppføringen din, blir det en del av hvordan resultatet ditt ser ut ved siden av konkurrentene. Google offentliggjør ingen rangeringseffekt for favicon, og du bør ikke forvente et løft i rangeringen. Fordelen handler om visuell gjenkjenning: brukere som kjenner ikonet ditt, er mer tilbøyelige til å oppdage og velge resultatet ditt, særlig på mobil der resultatene er kompakte.

Brukervennlighet med mange åpne faner

Når en nettleser har tjue faner åpne, kuttes titlene ned til ingenting, og faviconet er alt som er igjen. Et særpreget ikon gjør at folk finner fanen din umiddelbart og går tilbake til den i stedet for å åpne en duplikat eller glemme den.

Profesjonelt inntrykk

Et gjennomtenkt favicon viser samme øye for detaljer som resten av nettstedet ditt. Enten det gjelder produktsider, dokumentasjon, blogger eller nettapper, er det en av de rimeligste måtene å gi nettstedet ekstra finish på.

Tilgjengelighet når man skal finne riktig fane

Ikoner hjelper brukere som skanner visuelt i stedet for å lese, blant annet personer med dysleksi eller kognitive forskjeller, og alle som bytter raskt mellom oppgaver. Et ikon med høy kontrast og enkel form er lettere å skille ut. Husk likevel at et favicon er et supplement: det erstatter ikke en tydelig sidetittel, som skjermlesere og hjelpeteknologi er avhengige av.

Hva skjer hvis du ikke har et favicon

Nettlesere ber automatisk om /favicon.ico fra roten av domenet ditt, selv om HTML-koden din ikke nevner et. Hvis filen ikke finnes, skjer flere ting:

• Generisk ikon: besøkende ser et standard globus-, dokument- eller blankt ikon i fanen og i bokmerkene, noe som virker anonymt.
• 404-feil i loggene dine: hver nettleser som ber om filen, genererer en mislykket forespørsel. På travle nettsteder gir dette støy i tilgangslogger, feilovervåking og analyse, og kan skjule reelle problemer.
• Ingen ikon i Google-resultater: uten et gyldig favicon som kan crawles, viser Google sin standard plassholder ved siden av oppføringen din.
• Bortkastede forespørsler: nettlesere kan prøve på nytt, noe som gir liten, men meningsløs ekstra belastning på serveren din.

Selv et veldig enkelt ikon er bedre enn ingen, fordi det fjerner 404-feilene og gir brukerne noe gjenkjennelig.

Favicon-formater forklart

Ingen enkeltstående format dekker alle plattformer, så de fleste nettsteder bruker et lite sett med filer.

Eldre Windows-flatebilder (konfigurert via browserconfig.xml) var nødvendige for Internet Explorer 11 og den gamle Edge. De er sjelden nødvendige nå, med mindre du må støtte slike miljøer.

Googles retningslinjer for favicon i søkeresultater

Hvis du vil at ikonet ditt skal vises i Google Søk, følger du Googles publiserte krav:

• Størrelse: bildet må være kvadratisk (1:1) og et multiplum av 48 piksler, for eksempel 48x48, 96x96 eller 144x144. Google skalerer det deretter ned til 16x16 for visning. Minste støttede størrelse er 8x8, men 48x48 eller større anbefales.
• Formater: alle formater som støttes av nettlesere fungerer, inkludert ICO, PNG og SVG.
• Stabil URL: ikke endre favicon-URL-en ofte. En stabil adresse hjelper Google med å holde ikonet ditt oppdatert.
• Kan crawles: både favicon-filen og hjemmesiden din må være tilgjengelige for Googlebot. Ikke blokker dem i robots.txt eller bak en innlogging.
• Én deklarasjon per nettsted: ikonet er knyttet til nettstedets hjemmeside, så plasser <link>-taggen i head på hjemmesiden din.
• Representativt og passende: ikonet bør gjenspeile merkevaren din, og Google kan erstatte et som er støtende eller misvisende med sitt standardikon.

Etter at du har publisert eller endret et favicon, kan det ta alt fra dager til uker før Google crawler og oppdaterer det på nytt, så ikke forvent en umiddelbar endring.

Slik lager du raskt et favicon med MakeFav

Du trenger ikke designprogramvare eller kommandolinje. MakeFav-generatoren gjør ett kildebilde om til filene som er beskrevet ovenfor.

1. Forbered grafikken din. Bruk en kvadratisk logo eller et symbol på 512 x 512 px eller større. Enkle former fungerer best fordi ikonet vil bli sett i 16 px.
2. Last det opp på MakeFavs forside, eller åpne editoren for å justere bilde, bakgrunn og marger før eksport.
3. Forhåndsvis resultatet i små størrelser og på lyse og mørke bakgrunner for å være sikker på at det forblir lesbart.
4. Last ned pakken. Den inneholder ICO, PNG-størrelser, Apple touch-ikon, manifest-ikoner og HTML-kodebiten du skal lime inn.
5. Last opp filene til roten av nettstedet ditt slik at de er tilgjengelige på stier som /favicon.ico.
6. Legg til HTML-koden i <head> på hver side, eller i den delte layouten eller malen din.
7. Kontroller med favicon-kontrollen, tøm deretter nettleserbufferen og last siden på nytt for å se det nye ikonet.

Eksempel på HTML-kodebit

<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">

Attributtet sizes="48x48" på ICO-lenken hjelper nettlesere med å foretrekke SVG når de støtter det, samtidig som ICO beholdes som reserve. PNG-en på 96 px oppfyller Googles regel om multiplum av 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 jobber med byggepipelines eller vil automatisere opprettelsen av ikoner, kan du se ressursene for utviklere.

Designtips for et favicon som fungerer

• Hold det enkelt. Én form, én bokstav eller et fet monogram slår en detaljert logo som blir til grøt i 16 px.
• Bruk sterk kontrast. Sørg for at ikonet er synlig i både lyse og mørke nettlesertemaer. En farget bakgrunnsflate hjelper.
• Unngå tekst. En enkelt forbokstav går fint; ord er uleselige i denne størrelsen.
• La det være litt luft rundt for maskable ikoner og ikoner med avrundede hjørner, slik at ingenting viktig beskjæres.
• Vær konsekvent med logoen og merkevarefargene dine, slik at faviconet forsterker gjenkjenningen.
• Test på ekte enheter og sjekk hvordan det ser ut i en fane, et bokmerke og et Google-resultat.

Vanlige favicon-problemer

Hvis ikonet ditt ikke vises, er de vanligste årsakene hurtigbuffer, feil stier og blokkerte filer. Nettlesere bufrer favicon svært aggressivt, så en hard oppdatering eller et nytt privat vindu er ofte nok til å se endringer. Kontroller at fil-URL-en returnerer status 200 og riktig innholdstype, og at <link>-taggen ligger i <head>. For søk må du sørge for at robots.txt ikke blokkerer ikonet eller hjemmesiden. MakeFav-kontrollen kan hjelpe deg med å oppdage disse problemene raskt.

Ofte stilte spørsmål

Hva står favicon for?

Favicon er kort for «favorite icon» (favorittikon). Navnet kommer fra Internet Explorer 5, som i 1999 først brukte en liten ikonfil til å pynte oppføringene i nettleserens Favoritter-liste. Begrepet ble hengende ved selv om ikonet nå vises på mange andre steder.

Hjelper et favicon på SEO?

Et favicon er ikke en direkte rangeringsfaktor. Det vises imidlertid ved siden av nettstedsnavnet ditt i Google-resultater på mobil og datamaskin, så det kan styrke merkevaregjenkjenningen og det visuelle uttrykket til oppføringen din, noe som indirekte kan gi flere klikk. Det er ved å følge Googles retningslinjer at ikonet blir kvalifisert for visning.

Hvilken størrelse bør et favicon ha?

For Google Søk bruker du et kvadratisk bilde som er et multiplum av 48 piksler, for eksempel 48x48 eller 96x96. For bredere dekning bør du også levere en ICO-fil, et Apple touch-ikon på 180x180 og manifest-ikoner på 192x192 og 512x512. En SVG er et godt tillegg for skalerbarhet.

Trenger jeg fortsatt favicon.ico hvis jeg bruker PNG eller SVG?

Det er fortsatt en god idé. Nettlesere og enkelte verktøy ber om /favicon.ico som standard, og eldre programvare er avhengig av den. Å ha en ICO-fil i roten av nettstedet forhindrer 404-feil og gir deg en trygg reserve når SVG eller PNG ikke støttes.

Hvorfor oppdateres ikke faviconet mitt?

Nettlesere og søkemotorer bufrer favicon i lang tid. Prøv en hard oppdatering, et privat vindu eller å tømme hurtigbufferen. Kontroller at filstien er riktig og at den nye filen blir servert. I Google Søk kan det ta dager eller uker før et endret ikon crawles og oppdateres på nytt.