Favicon.ico für Ihre Website aus einem einzigen Bild erstellen

Ein Favicon ist mehr als ein kleines Symbol - es ist ein wesentlicher Teil der Markenidentität im Web. Browser zeigen es im Tab an, Nutzer sehen es in Lesezeichen und im Verlauf, und Lighthouse prüft seine Präsenz als Best Practice. Ohne Favicon wirkt eine Website unvollständig.

Moderne Websites benötigen Favicons in mehreren Größen: ein favicon.ico für ältere Browser, PNG-Symbole für Desktop-Browser, ein Apple Touch Icon für iOS-Geräte und größere Symbole für PWA-Installationen auf Android. Dieses Tool generiert alle erforderlichen Dateien aus einem einzigen Bild.

Jede Größe hat ihren eigenen Verwendungszweck:

Wenn Sie keine PWA erstellen, reichen favicon.ico, 32x32 PNG und 180x180 PNG. Diese drei Dateien decken die meisten Anwendungsfälle ab.

Ein Favicon ist eine sehr kleine Grafik – teilweise nur 16×16 Pixel. Daher eignet sich nicht jedes Bild als Quelle:

• Einfache Formen und lesbare Symbole – schlichte Logos, einzelne Buchstaben oder Symbole funktionieren am besten. Vermeiden Sie komplexe Grafiken mit vielen Details.
• Quadratisches Format – ein Favicon ist quadratisch. Bilder mit anderen Proportionen als 1:1 werden zugeschnitten oder verzerrt.
• Ausreichende Größe – wir empfehlen ein Quellbild von mindestens 512×512 Pixeln. Kleinere Bilder werden hochskaliert.
• SVG als ideale Quelle – SVG skaliert verlustfrei, sodass Icons in allen Größen scharf sind.
• Kontrastreiche Farben – ein Favicon muss auf verschiedenen Hintergründen sichtbar sein (helle Tabs, Dark Mode). Wählen Sie Farben, die die Lesbarkeit bewahren.

Google zeigt Favicons neben der URL in den Suchergebnissen an. In mobilen Ergebnissen erscheint das Website-Symbol seit 2019. Auf dem Desktop zeigt Google Favicons seit Januar 2020. Das Favicon ist damit ein sichtbares Markenelement in jeder Google-Suche.

Die Anforderungen von Google an Favicons sind klar definiert. Das Symbol muss mindestens 48×48 Pixel groß sein. Die Form muss quadratisch sein. Das Bild muss auf weißem Hintergrund deutlich erkennbar bleiben. Google lehnt Symbole mit unangemessenem oder leerem Inhalt ab.

Der Googlebot crawlt und indexiert Favicons unabhängig vom Seiteninhalt. Die Aktualisierung des Favicons in den Suchergebnissen kann mehrere Tage bis Wochen dauern. Die Favicon-Datei darf nicht in der robots.txt blockiert sein - andernfalls kann Google die neue Version nicht abrufen.

Bing zeigt ebenfalls Favicons in seinen Suchergebnissen. DuckDuckGo stellt Websitesymbole neben jedem Ergebnislink dar. Ein vollständiger Favicon-Satz sorgt für ein einheitliches Markenbild in allen großen Suchmaschinen. Nutzer erkennen vertraute Favicons schneller, was zu höheren Klickraten beiträgt.

Corporate Design hat in Deutschland, Österreich und der Schweiz einen hohen Stellenwert. Ein Favicon, das farblich und gestalterisch zum Firmenlogo passt, stärkt die Wiedererkennung in Browser-Tabs, Lesezeichen und auf dem Smartphone-Startbildschirm.

Wenn ein Nutzer zehn oder mehr Tabs geöffnet hat, bleibt das Favicon das einzige sichtbare Element zur Identifikation der Website. Farbliche Konsistenz zwischen Favicon und Unternehmenslogo verbessert die Markenerinnerung. Eine vereinfachte Version des Logos oder der erste Buchstabe funktioniert bei kleinen Pixelgrößen am besten.

In Shopware, TYPO3 und Contao lässt sich das Favicon in den allgemeinen Seiteneinstellungen hinterlegen. Online-Shops auf diesen Plattformen profitieren von einem professionellen Favicon, das Vertrauen signalisiert und den Shop in Preisvergleichsportalen visuell hervorhebt.

Die BITV 2.0 (Barrierefreie-Informationstechnik-Verordnung) fordert ausreichenden Kontrast für visuelle Elemente auf Webseiten öffentlicher Stellen. Das Favicon muss auf hellen und dunklen Hintergründen erkennbar sein. Kontraststarke Farben und einfache Formen erfüllen diese Anforderung zuverlässig.

Drei Favicon-Formate prägen die moderne Webentwicklung: ICO, PNG und SVG. Jedes Format erfüllt einen bestimmten Zweck im Browser-Ökosystem.

ICO ist das ursprüngliche Favicon-Format. Eine ICO-Datei kann mehrere Größen (16, 32 und 48 Pixel) in einem einzigen Container enthalten. Jeder große Browser unterstützt ICO, was es zur kompatibelsten Option macht. PNG bietet höhere Bildqualität bei kleinerer Dateigröße. Moderne Browser bevorzugen PNG-Favicons, die über Link-Tags im HTML-Head deklariert werden.

SVG-Favicons sind die neueste Option. Chrome unterstützt SVG-Favicons seit Version 80, Firefox seit Version 41. SVG skaliert verlustfrei auf jede Größe. SVG-Favicons unterstützen außerdem den Dark Mode über die CSS-Media-Query prefers-color-scheme - das Symbol kann seine Farben automatisch anpassen. Safari unterstützt SVG-Favicons Anfang 2025 noch nicht.

Browser cachen Favicons aggressiv und unabhängig vom Seiten-Cache. Cache-Strategien nutzen den Header Cache-Control mit max-age=604800 oder einen Versionsparameter (/favicon.ico?v=2). Die Gesamtgröße aller Favicon-Dateien sollte unter 20 KB bleiben. Der Lighthouse-Audit in den Chrome DevTools prüft die Existenz und Gültigkeit des Favicons.