» Warum das kleine Symbol so viel bewirkt
Favicon steht für „favorite icon“ – und ist überall dort zu sehen, wo deine Website als Miniatur auftaucht: in der Tab-Leiste, in der Lesezeichen-Liste, auf dem Homescreen und bei Google direkt neben deinem Website-Namen. Wer zehn Tabs offen hat, findet deine Seite über das Icon wieder. Oder eben nicht.
Eine Seite ohne Favicon zeigt im Tab nur ein graues Standard-Symbol. Das fällt kaum bewusst auf – aber es sendet ein leises Signal: hier hat jemand nicht zu Ende gearbeitet. Genau solche Details entscheiden über den Gesamteindruck, wie ich im Artikel über kleine Änderungen mit großer Wirkung ausführlicher zeige. Das Favicon gehört zu deinem Branding wie Logo und Farbwelt.
» Schritt 1: Favicon gestalten
Ein gutes Favicon ist die reduzierteste Form deiner Marke. Nicht dein komplettes Logo verkleinert, sondern das eine Element, das übrig bleibt, wenn alles andere wegfällt: ein Symbol, eine Form oder ein bis zwei Buchstaben. Auf 16 × 16 Pixeln überlebt kein Schriftzug und kein Detail.
Drei Dinge entscheiden über die Wirkung:
Kontrast. Browser-Tabs sind hellgrau, weiß oder – im Dark Mode – fast schwarz. Dein Favicon muss auf beiden Hintergründen bestehen. Ein dunkles Icon auf dunklem Tab verschwindet einfach.
Farbe. Nutze deine Markenfarbe, aber sparsam – eine Fläche, ein Akzent. Welche Wirkung einzelne Farben entfalten, liest du im Artikel über die Macht der Farben im Webdesign.
Größe. Erstelle die Vorlage in 512 × 512 Pixeln – daraus lassen sich alle kleineren Varianten ableiten. Noch besser: Baue das Icon als SVG, dann ist es in jeder Größe scharf.
Tipp: Du brauchst kein Grafikprogramm. Ein Buchstaben-Favicon entsteht direkt als SVG-Code, und Favicon-Generatoren im Netz erzeugen dir aus einem Bild alle nötigen Formate. Auch KI-Bildtools liefern brauchbare Symbol-Entwürfe – wichtig ist nur, dass du das Ergebnis auf Tab-Größe verkleinerst und prüfst, ob es erkennbar bleibt.
» Schritt 2: Favicon einbinden
Bei einer modernen Website ist das Einbinden eine Sache von einer Zeile HTML im <head> jeder Seite:
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
Alternativ mit PNG: <link rel="icon" type="image/png" href="/favicon.png">. Für ältere Browser legst du zusätzlich eine favicon.ico ins Root-Verzeichnis deiner Website – die wird automatisch gefunden, ganz ohne Code.
Zwei sinnvolle Ergänzungen:
Apple-Geräte: <link rel="apple-touch-icon" href="/apple-touch-icon.png"> mit einem 180 × 180 Pixel großen PNG – das Icon erscheint, wenn jemand deine Seite auf dem Homescreen ablegt.
Dark Mode: Ein SVG-Favicon kann per eingebettetem Stylesheet auf das Farbschema des Systems reagieren – helles Icon im dunklen Tab, dunkles im hellen. Das können nur SVGs, und es ist der Grund, warum sie 2026 der Standard sind.
» Schritt 3: Favicon testen
Nach dem Einbinden: prüfen. Öffne deine Seite in Chrome, Firefox, Safari und auf dem Smartphone. Wechsle einmal zwischen hellem und dunklem Systemmodus. Und such deine Seite bei Google – dort taucht das Favicon neben dem Website-Namen in den Ergebnissen auf, was ein unterschätzter Vertrauensfaktor ist.
Wird das Icon nicht angezeigt, liegt es fast immer am Browser-Cache: Browser speichern Favicons besonders hartnäckig. Leere den Cache oder teste im privaten Fenster. Zweithäufigste Ursache: ein Tippfehler im Dateipfad.
» Das Detail, das den Unterschied macht
Ein Favicon kostet dich eine Stunde und wirkt jahrelang – in jedem Tab, jedem Lesezeichen, jedem Suchergebnis. Es ist eines dieser Details, die niemand lobt, aber jeder vermisst. Bei den Websites aus meinen Website-Paketen ist das Favicon deshalb von Anfang an dabei – genau wie alles andere, was eine Seite fertig macht statt fast fertig.
Häufige Fragen
Welches Format sollte ein Favicon haben?
Am flexibelsten ist SVG: gestochen scharf in jeder Größe und Dark-Mode-fähig. Als breit unterstützte Alternative funktioniert PNG in 512 × 512 Pixeln. Eine zusätzliche favicon.ico im Root-Verzeichnis dient als Fallback für ältere Browser.
Wie binde ich ein Favicon in meine Website ein?
Mit einer Zeile HTML im <head> jeder Seite: <link rel="icon" type="image/svg+xml" href="/favicon.svg">. Für Apple-Geräte kommt eine zweite Zeile mit rel="apple-touch-icon" und einem 180 × 180 Pixel großen PNG dazu.
Warum wird mein Favicon nicht angezeigt?
Meistens liegt es am Browser-Cache – Browser speichern Favicons hartnäckig zwischen. Leere den Cache oder öffne die Seite im privaten Fenster. Prüfe außerdem, ob der Pfad im <link>-Tag stimmt und die Datei wirklich auf dem Server liegt.
Bringt ein Favicon etwas für SEO?
Kein direkter Rankingfaktor – aber Google zeigt das Favicon in den Suchergebnissen neben deinem Website-Namen an. Ein erkennbares Icon erhöht dort die Klickwahrscheinlichkeit, ein fehlendes wirkt unfertig. Indirekt zahlt es also auf deine Sichtbarkeit ein.