Favicon-design: små ikoner som ändå ser ut som du

En favicon är den lilla kvadratiska ikonen som står för din webbplats i webbläsarflikar, bokmärken, historik, telefoners startskärmar och Google-resultat. Den visas ofta i bara 16 eller 32 pixlar, så bra favicon-design är skoningslös: en kraftig form eller bokstav, hög kontrast, inga fina detaljer. Tekniskt behöver du bara en handfull filer, en ICO på 32×32, en SVG, en Apple touch icon på 180×180 och två manifest-PNG:er, plus några rader HTML.

Faviconstorlekar och filer du faktiskt behöver

Gamla guider listar tjugo storlekar. Moderna webbläsare skalar bra, så en kort uppsättning täcker varje plats där en favicon visas. Det här följer det upplägg som web.dev rekommenderar för manifest och nuvarande webbläsarbeteende för resten.

Google Sök visar också favicons bredvid resultat. Deras riktlinjer för favicons ber om en kvadratisk ikon, rekommenderar en större än 48×48 pixlar och säger att den ska representera ditt varumärke. PNG-filerna på 192 och 512 uppfyller båda kravet, men kontrollera den sidan före lansering, eftersom Google reviderar den.

Så lägger du till en favicon på din webbplats

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

Designa en favicon som syns i 16 pixlar

I 16 pixlar har du 256 punkter. Ett helt ordmärke blir en grå fläck, tunna streck försvinner och två liknande färger flyter ihop. De favicons folk känner igen direkt är nästan alltid en av tre saker: en enda bokstav, en enkel symbol eller en solid form i en särskiljande färg.

Färg och gradienter i en liten ikon

Färg gör mer jobb än form i den här storleken, eftersom det är den folk skannar efter längs en rad flikar. En igenkännbar varumärkesfärg slår en klurig symbol. Gradienter kan fungera om de är kraftiga och korta: två stopp med tydlig skillnad i ljushet läses som en belyst yta, medan en subtil blandning med flera stopp bara ser lerig ut i 16 pixlar.

Om ditt varumärke redan har en signaturbakgrund kan ett utsnitt av den bli en särskiljande favicon-ruta. Gradiently Marks är användbara här: samma utseende som löper bakom dina inlägg kan ligga bakom en enda bokstav i 512×512, så att fliken och flödet känns som ett varumärke. Se till att bokstaven behåller stark kontrast mot rutan, som logotyp på gradientbakgrund tar upp.

Favicons för mörkt läge med SVG

En svart ikon försvinner på ett mörkt flikfält, och en vit på ett ljust. Eftersom en SVG-favicon är ett litet dokument kan den bära sin egen mediefråga och byta färger med webbläsarens 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 solid ruta bakom symbolen är den enklaste försäkringen: den syns på vilken bakgrund som helst, ljus eller mörk, utan att förlita sig på mediefrågan. SVG mot PNG förklarar varför vektorfilen är den att behålla.

En snabb checklista för favicon

1. 1

   Utgå från den enklaste delen av din logotyp

   Ett monogram, första bokstaven eller bara symbolen. Logotypvarianter går igenom hur du bygger en liten version med avsikt.

2. 2

   Rita den i 32×32 först

   Designa på det lilla rutnätet och skala upp, inte tvärtom. Tjocka streck, generösa mellanrum.

3. 3

   Exportera de fem filerna

   ICO i 32×32, SVG, Apple touch icon i 180×180, manifest-PNG:er i 192 och 512.

4. 4

   Testa i riktiga flikar

   Öppna din webbplats bredvid tio andra, i ljusa och mörka teman. Hittar du inte din flik på en sekund, förenkla.

Faviconen sitter bredvid din Open Graph-bild och dina profilbilder i sociala medier som de små, konstanta signalerna för ett varumärke. Håll dem enhetliga, och se logotypstorlekar för hela paketet.