Favicon gestalten: winzige Icons, die trotzdem nach dir aussehen

Ein Favicon ist das kleine quadratische Icon, das für deine Website in Browser-Tabs, Lesezeichen, im Verlauf, auf Startbildschirmen und in Google-Ergebnissen steht. Oft wird es mit nur 16 oder 32 Pixeln angezeigt, deshalb ist gutes Favicon-Design gnadenlos: eine kräftige Form oder ein Buchstabe, hoher Kontrast, keine feinen Details. Technisch brauchst du nur eine Handvoll Dateien, eine ICO in 32×32, ein SVG, ein Apple Touch Icon in 180×180 und zwei Manifest-PNGs, dazu ein paar Zeilen HTML.

Favicon-Größen und Dateien, die du wirklich brauchst

Alte Anleitungen listen zwanzig Größen auf. Moderne Browser skalieren gut, daher deckt ein kurzes Set jeden Ort ab, an dem ein Favicon erscheint. Das folgt dem auf web.dev empfohlenen Vorgehen für Manifeste und dem aktuellen Browserverhalten für den Rest.

Auch die Google-Suche zeigt Favicons neben den Ergebnissen. Die Favicon-Richtlinien verlangen ein quadratisches Icon, empfehlen eines größer als 48×48 Pixel und sagen, dass es deine Marke repräsentieren soll. Die PNGs in 192 und 512 erfüllen das beide; prüf die Seite vor dem Launch, denn Google überarbeitet sie.

So bindest du ein Favicon auf deiner Website ein

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

Ein Favicon gestalten, das bei 16 Pixeln lesbar ist

Bei 16 Pixeln hast du 256 Punkte. Ein vollständiger Schriftzug wird zum grauen Fleck, dünne Linien verschwinden und zwei ähnliche Farben verschmelzen. Die Favicons, die man sofort erkennt, sind fast immer eins von drei Dingen: ein einzelner Buchstabe, ein einfaches Symbol oder eine flächige Form in einer markanten Farbe.

Farbe und Verläufe in einem winzigen Icon

Bei dieser Größe leistet Farbe mehr als Form, denn nach ihr sucht man in einer Reihe von Tabs. Eine wiedererkennbare Markenfarbe schlägt ein cleveres Symbol. Verläufe funktionieren, wenn sie kräftig und kurz sind: Zwei Stopps mit deutlichem Helligkeitsunterschied wirken wie eine beleuchtete Fläche, während ein subtiler Verlauf mit vielen Stopps bei 16 Pixeln nur matschig aussieht.

Wenn deine Marke schon einen typischen Hintergrund hat, kann ein Ausschnitt davon eine markante Favicon-Kachel ergeben. Gradiently Marks sind hier nützlich: Derselbe Look, der hinter deinen Posts läuft, kann bei 512×512 hinter einem einzelnen Buchstaben sitzen, sodass Tab und Feed wie eine Marke wirken. Achte darauf, dass der Buchstabe starken Kontrast zur Kachel behält, wie in Logo auf Verlaufshintergrund beschrieben.

Dark-Mode-Favicons mit SVG

Ein schwarzes Icon verschwindet auf einer dunklen Tab-Leiste, ein weißes auf einer hellen. Weil ein SVG-Favicon ein kleines Dokument ist, kann es seine eigene Media Query mitbringen und die Farben mit dem Theme des Browsers wechseln.

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

Eine flächige Kachel hinter dem Symbol ist die einfachste Versicherung: Sie ist auf jedem Hintergrund lesbar, hell oder dunkel, ohne sich auf die Media Query zu verlassen. SVG vs PNG erklärt, warum du die Vektordatei behalten solltest.

Eine schnelle Favicon-Checkliste

1. 1

   Beim einfachsten Teil deines Logos anfangen

   Ein Monogramm, der erste Buchstabe oder nur das Symbol. Logo-Varianten zeigt, wie du gezielt eine kleine Version baust.

2. 2

   Zuerst bei 32×32 zeichnen

   Auf dem kleinen Raster gestalten und hochskalieren, nicht umgekehrt. Kräftige Linien, großzügige Abstände.

3. 3

   Die fünf Dateien exportieren

   ICO in 32×32, SVG, Apple Touch Icon in 180×180, Manifest-PNGs in 192 und 512.

4. 4

   In echten Tabs testen

   Öffne deine Seite neben zehn anderen, im hellen und dunklen Theme. Findest du deinen Tab nicht in einer Sekunde, vereinfache.

Das Favicon steht neben deinem Open-Graph-Bild und deinen Social-Profilbildern als kleine, beständige Signale einer Marke. Halte sie einheitlich, und sieh dir Logo-Größen für das komplette Set an.