Favicon-design: små ikoner med ditt eget uttrykk

Et favicon er det lille kvadratiske ikonet som står for nettstedet ditt i faner, bokmerker, historikk, telefonens hjemmeskjerm og Google-resultater. Det vises ofte bare i 16 eller 32 piksler, så godt favicon-design må være kompromissløst: én kraftig form eller bokstav, høy kontrast og ingen fine detaljer. Teknisk trenger du bare noen få filer, en ICO på 32×32, en SVG, et Apple touch-ikon på 180×180 og to PNG-er til manifestet, samt noen linjer HTML.

Favicon-størrelser og filer du faktisk trenger

Eldre guider lister tjue størrelser. Moderne nettlesere skalerer godt, så et kort sett dekker alle steder faviconet vises. Dette følger tilnærmingen web.dev anbefaler for manifester, og dagens nettleseratferd for resten.

Google Søk viser også faviconer ved resultatene. Deres favicon-retningslinjer ber om et kvadratisk ikon, anbefaler større enn 48×48 piksler og sier at det skal representere merkevaren. PNG-ene på 192 og 512 oppfyller dette. Sjekk siden før lansering, siden Google oppdaterer den.

Slik legger du til favicon på nettstedet

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">

{
  "name": "Studio Nine",
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" },
    { "src": "/icon-mask.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" }
  ]
}

Design et favicon som er tydelig ved 16 piksler

Ved 16 piksler har du 256 punkter. En full navnelogo blir en grå flekk, tynne streker forsvinner og to like farger flyter sammen. Faviconer folk kjenner igjen straks er nesten alltid én av tre ting: én bokstav, et enkelt symbol eller en heldekkende form i en særegen farge.

Farge og gradienter i et lite ikon

Fargen gjør mer av jobben enn formen i denne størrelsen, fordi det er den folk ser etter i en rad med faner. En gjenkjennelig merkevarefarge slår et smart symbol. Gradienter kan fungere hvis de er tydelige og korte: to fargestopp med klar forskjell i lyshet leses som en belyst flate, mens en subtil blanding med mange stopp bare ser grumsete ut ved 16 piksler.

Har merkevaren allerede en særegen bakgrunn, kan et utsnitt av den gi et gjenkjennelig favicon. Marks fra Gradiently er nyttige her: samme uttrykk som ligger bak innleggene kan stå bak én bokstav på 512×512, så fanen og feeden føles som én merkevare. Sørg for sterk kontrast mellom bokstaven og bakgrunnen, som dekket i logo på gradientbakgrunn.

Faviconer for mørk modus med SVG

Et svart ikon forsvinner på en mørk fanelinje, og et hvitt på en lys. Fordi et SVG-favicon er et lite dokument, kan det ha sin egen mediespørring og bytte farger med nettlesertemaet.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    rect { fill: #1e1b4b; }
    path { fill: #ffffff; }
    @media (prefers-color-scheme: dark) {
      rect { fill: #e0e7ff; }
      path { fill: #1e1b4b; }
    }
  </style>
  <rect width="32" height="32" rx="7"/>
  <path d="M9 24V8h3l8 10V8h3v16h-3l-8-10v10z"/>
</svg>

Et heldekkende felt bak symbolet er den enkleste forsikringen: det er tydelig på alle bakgrunner, lyse og mørke, uten å avhenge av mediespørringen. SVG eller PNG forklarer hvorfor du bør beholde vektorfilen.

En rask favicon-sjekkliste

1. 1

   Begynn med logoens enkleste del

   Et monogram, den første bokstaven eller symbolet alene. Logovarianter dekker det å lage en egen liten variant.

2. 2

   Tegn først på 32×32

   Design på det lille rutenettet og skaler opp, ikke motsatt. Tykke streker og romslige åpninger.

3. 3

   Eksporter de fem filene

   ICO på 32×32, SVG, Apple touch-ikon på 180×180 og manifest-PNG-er på 192 og 512.

4. 4

   Test i ekte faner

   Åpne nettstedet ved siden av ti andre, med lyst og mørkt tema. Finner du ikke fanen på ett sekund, forenkle.

Faviconet står sammen med Open Graph-bildet og profilbildene i sosiale medier som små, faste merkevaresignaler. Hold dem enhetlige, og se logostørrelser for hele settet.