FAQ

Favicon-Fragen, klar beantwortet

Die Dinge, auf die Entwickler wirklich stoßen – Caching, welche Dateien 2026 zählen, SVG und Dark Mode und wie die Google-Suche mit Favicons umgeht.

Warum aktualisiert sich mein Favicon nicht?

Das ist das häufigste Favicon-Problem, und fast immer liegt es am Caching. Browser halten an Favicons hartnäckiger fest als an den meisten anderen Dateien. Geh in dieser Reihenfolge vor: Hard-Refresh (Ctrl+Shift+R / Cmd+Shift+R); wenn das nichts bringt, schließe den Tab komplett und öffne einen neuen, denn der Favicon-Cache hängt oft am einzelnen Tab; während du testest, hänge einen Wegwerf-Versions-Parameter wie /favicon.ico?v=2 an, damit der Browser eine „neue" Datei lädt. Die Google-Suche behält eine eigene Kopie und aktualisiert nach eigenem Zeitplan – Tage bis Wochen.

Brauche ich 2026 noch eine favicon.ico?

Ja. Selbst wenn ein SVG vorhanden ist, rufen Browser und der Googlebot /favicon.ico weiterhin automatisch aus dem Stammverzeichnis ab, und ein paar ältere Clients sind darauf angewiesen. Es ist eine winzige Datei – behalte eine .ico mit mehreren Größen (16/32/48) als verlässliche Grundlage.

Welche Größen brauche ich wirklich?

Weit weniger, als die meisten Generatoren ausgeben. Der vollständige, aktuelle Satz ist: eine favicon.ico mit mehreren Größen (16/32/48), ein icon.svg, ein apple-touch-icon.png mit 180×180 sowie 192- + 512-PNGs, die aus deinem Web-App-Manifest referenziert werden. Die alten 70×70/150×150-Windows-Kacheln und Dutzende Zwischengrößen-PNGs werden nicht mehr verwendet.

Was ist der Unterschied zwischen einem Favicon und einem apple-touch-icon?

Das Favicon (.ico/SVG/PNG) ist das kleine Symbol im Tab und in Lesezeichen. Das apple-touch-icon ist ein 180×180-PNG, das iOS verwendet, wenn jemand deine Seite zum Startbildschirm hinzufügt – vom Betriebssystem groß und abgerundet dargestellt. iOS liest dafür dein SVG-Favicon nicht, daher ist das eigene PNG erforderlich.

Kann ich ein SVG-Favicon verwenden? Unterstützen es alle Browser?

Jeder aktuelle Desktop- und Mobil-Browser rendert SVG-Favicons. Liefere das SVG für sie aus und behalte eine favicon.ico, damit ältere Browser – und die Google-Suche – ebenfalls ein Icon bekommen. Das Beste aus beiden Welten, zwei Dateien.

Wie erstelle ich ein Dark-Mode-Favicon?

Nur SVG kann sich anpassen. Setze eine @media (prefers-color-scheme: dark)-Regel in das SVG, damit sich seine Füllung mit dem Browser-Theme ändert – nützlich, wenn ein dunkles Logo vor einer dunklen Tab-Leiste verschwinden würde. ICO und PNG sind feste Bitmaps und können nicht wechseln. Ein vollständiges Beispiel findest du in den Profi-Tipps.

Warum zeigt Google in der Suche das falsche – oder gar kein – Favicon?

Google hat konkrete Regeln: Das Favicon muss unter einer stabilen URL liegen, quadratisch sein und eine Größe haben, die ein Vielfaches von 48×48 ist (48, 96, 144…), auf demselben Host wie die Seite liegen und sich auf einer für Google indexierbaren Seite befinden. Außerdem cacht Google das Icon getrennt von der Seite, daher kann eine Änderung Tage bis Wochen dauern, bis sie sichtbar wird. Zeigt Google nichts an, prüfe, ob /favicon.ico dem Googlebot 200 zurückgibt und die Seite nicht durch robots oder noindex blockiert ist.

Sollte mein Favicon einen transparenten Hintergrund haben?

Meist ja – ein transparentes PNG/SVG sitzt sauber auf hellen wie dunklen Tab-Leisten. Die erzeugte .ico behält einen deckenden Fallback für den seltenen alten Browser, der kein Alpha rendern kann. Ist dein Logo hell, überlege, eine kleine deckende Fläche dahinterzulegen, damit es auf einer weißen Tab-Leiste nicht verschwindet.

Mein Favicon sieht unscharf oder matschig aus – warum?

Bei 16×16 stirbt jedes Detail. Wortmarken, dünne Striche und Farbverläufe werden zu Brei. Verwende ein einzelnes kräftiges Zeichen oder Symbol, hohen Kontrast und großzügigen Freiraum. Hat ein Logo kleinen Text, lass den Text fürs Favicon weg und behalte nur die Bildmarke.

Ich sehe favicon.ico-404er in meinen Server-Logs – ist das ein Problem?

Nur insofern, als du kein Favicon hast. Browser rufen /favicon.ico automatisch ab, daher taucht eine fehlende Datei als wiederholte 404er auf. Lege die Datei im Stammverzeichnis ab, dann hören sie auf.

Beeinflusst ein Favicon das SEO?

Nicht als Rankingfaktor. Aber die Google-Suche zeigt dein Favicon auf dem Smartphone neben dem Ergebnis an, daher verbessert ein klares, wiedererkennbares Icon die Klickrate – ein indirekter Gewinn, kein Ranking-Boost.

Wird mein Bild irgendwohin hochgeladen?

Nein. Der Generator läuft vollständig in deinem Browser über die Canvas-API – das Bild berührt niemals einen Server. Deshalb funktioniert er mit deiner privaten Grafik und sogar offline.

← Zurück zum Generator