Favicon-design: små ikoner, der stadig ligner dig

Et favicon er det lille kvadratiske ikon, der står for dit website i browserfaner, bogmærker, historik, telefonens hjemmeskærm og Googles resultater. Det vises ofte i kun 16 eller 32 pixels, så godt favicon-design er hårdhændet: én kraftig form eller ét bogstav, høj kontrast, ingen fine detaljer. Teknisk set skal du kun bruge en håndfuld filer, en ICO i 32×32, en SVG, et Apple touch icon i 180×180 og to PNG-filer til manifestet, plus nogle få linjer HTML.

De favicon-størrelser og filer, du faktisk har brug for

Gamle guides nævner tyve størrelser. Moderne browsere skalerer fint, så et kort sæt dækker alle de steder, et favicon vises. Det følger den tilgang, der anbefales på web.dev for manifester, og browsernes nuværende adfærd for resten.

Google Søgning viser også favicons ved siden af resultaterne. Googles retningslinjer for favicons beder om et kvadratisk ikon, anbefaler et større end 48×48 pixels og siger, at det skal repræsentere dit brand. PNG-filerne i 192 og 512 opfylder begge kravene; tjek siden før lancering, for Google reviderer den.

Sådan tilføjer du et favicon til dit site

<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, der kan læses i 16 pixels

I 16 pixels har du 256 prikker. Et helt ordmærke bliver til en grå plet, tynde streger forsvinder, og to ens farver smelter sammen. De favicons, folk genkender med det samme, er næsten altid én af tre ting: et enkelt bogstav, et simpelt symbol eller en massiv form i en karakteristisk farve.

Farve og gradienter i et lille ikon

I den størrelse gør farven mere arbejde end formen, for det er den, folk leder efter i en række faner. En genkendelig brandfarve slår et smart symbol. Gradienter kan fungere, hvis de er kraftige og korte: to farvestop med en tydelig forskel i lyshed læses som en belyst overflade, mens en diskret blanding med mange stop bare ser mudret ud i 16 pixels.

Hvis dit brand allerede har en karakteristisk baggrund, kan et udsnit af den blive en markant favicon-flise. Gradiently Marks er nyttige her: det samme udtryk, der ligger bag dine opslag, kan ligge bag et enkelt bogstav i 512×512, så fanen og feedet føles som ét brand. Sørg for, at bogstavet bevarer stærk kontrast mod flisen, som beskrevet i logo på gradientbaggrund.

Favicons til mørk tilstand med SVG

Et sort ikon forsvinder på en mørk fanelinje og et hvidt på en lys. Fordi et SVG-favicon er et lille dokument, kan det have sin egen media query og skifte farver med browserens tema.

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

En massiv flise bag symbolet er den enkleste forsikring: den kan læses på enhver baggrund, lys eller mørk, uden at være afhængig af media queryen. SVG vs PNG forklarer, hvorfor det er vektorfilen, du skal gemme.

En hurtig tjekliste til dit favicon

1. 1

   Start med den enkleste del af dit logo

   Et monogram, forbogstavet eller symbolet alene. Logovarianter handler om bevidst at bygge en lille version.

2. 2

   Tegn det i 32×32 først

   Design på det lille gitter, og skalér op, ikke omvendt. Tykke streger, generøse mellemrum.

3. 3

   Eksportér de fem filer

   ICO i 32×32, SVG, Apple touch icon i 180×180 og PNG-filer i 192 og 512 til manifestet.

4. 4

   Test i rigtige faner

   Åbn dit site ved siden af ti andre, i lyst og mørkt tema. Kan du ikke finde din fane på et sekund, så forenkl.

Faviconet står sammen med dit Open Graph-billede og dine profilbilleder på sociale medier som de små, konstante signaler fra et brand. Hold dem ensartede, og se logostørrelser for hele sættet.