Notizen zu Favicons

Leitfaden · 3 Min. Lesezeit

Warum sich dein Favicon nicht aktualisiert – und wie du es erzwingst

Du hast das Favicon geändert, deployt, neu geladen – und das alte ist immer noch da. Das ist die mit Abstand häufigste Favicon-Beschwerde, und fast nie liegt es am Code. Browser cachen Favicons weit aggressiver als Seiten oder Bilder, und der Favicon-Cache übersteht ein normales Neuladen oft.

Geh es in dieser Reihenfolge an:

• Hard-Refresh. Ctrl+Shift+R (Windows) oder Cmd+Shift+R (Mac) lädt unter Umgehung des Seiten-Caches neu.
• Tab neu öffnen. Der Favicon-Cache hängt häufig am geöffneten Tab. Schließe ihn vollständig und öffne einen neuen.
• Mit einem Parameter austricksen. Lass den Link beim Testen auf eine „neue" URL zeigen: <link rel="icon" href="/favicon.ico?v=2">. Erhöhe die Zahl bei jeder Änderung.
• Stelle sicher, dass die Datei wirklich da ist. Lade yourdomain.com/favicon.ico direkt – wenn es einen 404 gibt, zeigt der Browser ein gecachtes Icon für eine Datei, die es nicht mehr gibt.

Die Google-Suche ist ein Fall für sich. Sie cacht dein Favicon getrennt von deinen Seiten und aktualisiert nach Googles Zeitplan, sodass ein neues Icon in den Suchergebnissen um Tage oder Wochen hinterherhinken kann, selbst wenn deine Seite korrekt ist. Es gibt keinen Knopf, der das beschleunigt – stelle sicher, dass /favicon.ico dem Googlebot 200 zurückgibt, und warte.

Meinung · 4 Min. Lesezeit

Hör auf, 20 Favicon-Dateien zu erzeugen – der minimale Satz für 2026

Viele Favicon-Tools drücken dir noch immer ein ZIP mit sechzehn PNGs, einer browserconfig.xml und Microsoft-Kachelbildern in die Hand. Fast alles davon ist Ballast. Windows-Kacheln wurden mit der Live-Tiles-Oberfläche eingestellt; der Haufen an Zwischengrößen-PNGs löste ein Browser-Problem, das es nicht mehr gibt.

Hier ist der Satz, der alles heute Gebräuchliche abdeckt:

• favicon.ico – mit mehreren Größen (16/32/48), für ältere Browser und die Google-Suche.
• icon.svg – eine skalierbare Datei, die moderne Browser bevorzugen, dark-mode-fähig.
• apple-touch-icon.png – 180×180 für iOS-Startbildschirme.
• android-chrome-192- und -512-PNGs – referenziert aus deinem Web-App-Manifest für Android und PWAs.

Fünf Dateien, vier <link>-/Manifest-Verweise, fertig. Weniger Dateien bedeuten weniger, was synchron gehalten werden muss, einen leichteren Deploy und keine veraltete browserconfig.xml, die auf gelöschte Bilder zeigt. Besteht ein Tool darauf, dass du zwanzig brauchst, optimiert es darauf, gründlich zu wirken – nicht darauf, was Browser tatsächlich anfragen.

Technik · 3 Min. Lesezeit

SVG-Favicons und Dark Mode: ein Icon, das sich anpasst

Ein dunkles Logo wirkt auf einer hellen Tab-Leiste gestochen scharf und verschwindet auf einer dunklen fast. Zwei Dateien auszuliefern und zu tauschen ist fummelig. Mit einem SVG-Favicon kannst du eine einzige Datei auf das Browser-Theme reagieren lassen, denn der Browser wendet CSS im SVG an, wenn er das Icon rendert.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .glyph { fill: #111; }
    @media (prefers-color-scheme: dark) { .glyph { fill: #fff; } }
  </style>
  <path class="glyph" d="…"/>
</svg>

Binde es mit <link rel="icon" href="/icon.svg" type="image/svg+xml"> ein und behalte eine schlichte favicon.ico als Fallback – ältere Browser und die Google-Suche werten die Media-Query nicht aus und brauchen daher ebenfalls ein statisches Icon. Das Ergebnis: Auf einem hellen System ist das Zeichen dunkel, auf einem dunklen kippt es zu hell – aus einer einzigen kleinen Datei.