Kostenloser Favicon-Generator für alle Plattformen

Zusammenfassung: Favicons erscheinen in Browser-Tabs, Lesezeichen, mobilen Startbildschirmen und Google-Suchergebnissen. Ein einziges 512x512 Quellbild kann in Sekunden jede benötigte Größe erzeugen.

Ein Favicon ist das kleine Symbol, das Ihre Website auf jeder Plattform und jedem Gerät repräsentiert. Es erscheint in Browser-Tabs, Lesezeichenlisten, Verlaufsmünüs, Progressive-Web-App-Launchern und seit 2019 direkt in Googles mobilen Suchergebnissen neben Ihrem Site-Namen. Trotz seiner winzigen Größe spielt das Favicon eine überproportionale Rolle bei der Markenerkennung und dem Nutzervertrauen.

Googles Dokumentation bestätigt, dass Websites ein gültiges Favicon haben müssen, um eines in den Suchergebnissen anzuzeigen. Seiten ohne Favicon zeigen ein generisches Globussymbol, das die visuelle Unverwechselbarkeit verringert und die Klickraten im Vergleich zu Markenkonkurrenten senken kann. Ein Google Search Central-Leitfaden enthält genaue Anforderungen: Die Datei muss ein Vielfaches von 48 Pixeln, quadratisch und für Googlebot zugänglich sein.

Warum Favicons für SEO und Branding wichtig sind

Wenn Nutzer auf Mobilgeräten Google-Suchergebnisse durchsuchen, ist das Favicon eines der ersten visuellen Elemente, die sie bemerken. Ein klares, erkennbares Symbol schafft sofortige Markenassoziation und kann die Klickrate verbessern, indem Ihr Eintrag gegenüber Konkurrenten mit Standardsymbolen hervorsticht.

Über die Suche hinaus dienen Favicons als dauerhafte Marken-Berührungspunkte. Jeder offene Browser-Tab zeigt Ihr Symbol. Jeder Lesezeicheneintrag zeigt es. Wenn ein Nutzer Ihre Website zum Startbildschirm seines Telefons hinzufügt, wird das Apple Touch-Symbol oder das Android Chrome-Symbol zu Ihrer app-ähnlichen Darstellung. Websites, die diese Assets vernachlässigen, wirken unfertig und unprofessionell.

Progressive Web Apps (PWAs) sind vollständig auf korrekt konfigurierte Favicons angewiesen. Das Web-App-Manifest verweist auf Icon-Dateien in mehreren Auflösungen. Ohne sie erscheint die Installationsaufforderung möglicherweise nicht, und die PWA wird auf dem Startbildschirm nicht korrekt angezeigt.

Alle Favicon-Größen, die Sie benötigen

Eine vollständige Favicon-Implementierung umfasst vier Hauptkontexte, jeder mit spezifischen Datei-größen:

Browser-Favicons verwenden ICO- oder PNG-Dateien mit 16x16 und 32x32 Pixeln. Diese erscheinen in Tabs, Adressleisten und Lesezeichenmenüs. Die 32x32-Version wird auch von Windows-Taskleisten-Verknüpfungen verwendet.

Apple Touch Icons erfordern ein PNG mit 180x180 Pixeln. iOS verwendet dieses, wenn Nutzer Ihre Website zu ihrem Startbildschirm hinzufügen. Ohne es macht Safari stattdessen einen Screenshot Ihrer Seite, was selten gut aussieht.

Android Chrome Icons benötigen PNGs mit 192x192 und 512x512 Pixeln, die im Web-App-Manifest referenziert werden. Diese ermöglichen PWA-Installationen und die Funktion "Zum Startbildschirm hinzufügen". Die 512x512-Version wird auch für Splash-Screens verwendet.

Windows-Kacheln verwenden ein PNG mit 150x150 Pixeln für die Microsoft-Start-Menü-Kachel und andere Windows-Integrationen. Eine optionale Datei browserconfig.xml ermöglicht die Anpassung der Kachelfarbe.

Unser kostenloser Favicon-Generator erzeugt all diese Größen aus einem einzigen Quellbild. Einmal hochladen, ein vollständiges Paket mit jedem enthaltenen Format herunterladen.

Wie man das perfekte Quellbild erstellt

Beginnen Sie mit einem quadratischen Bild bei 512x512 Pixeln oder größer. Das SVG-Format ist ideal, da es ohne Qualitätsverlust skaliert, aber ein hochauflösendes PNG funktioniert genauso gut.

Einfachheit ist entscheidend. Favicons werden in extrem kleinen Größen angezeigt, sodass komplizierte Details verschwinden. Die effektivsten Favicons verwenden kräftige Formen, hohen Kontrast und minimale Elemente. Denken Sie an den Twitter-Vogel, die GitHub-Katze oder den YouTube-Wiedergabe-Button, alle sofort erkennbar bei 16 Pixeln.

Vermeiden Sie die Verwendung von Fotografien oder vollständigen Logos mit Text. Buchstaben funktionieren nur, wenn es sich um einzelne Zeichen in einer fetten Schriftart handelt. Viele Marken verwenden nur ihren Anfangsbuchstaben oder eine vereinfachte Version ihres Logozeichens.

Verwenden Sie transparente Hintergründe für PNG-Favicons. Dadurch wirkt das Symbol auf jedem Browser-Theme sauber, ob hell oder dunkel. Das ICO-Format kann mehrere Größen in einer einzigen Datei enthalten, was es zu einem zuverlässigen Fallback für ältere Browser macht.

Favicons mit korrektem HTML implementieren

Nach der Generierung Ihrer Favicon-Dateien benötigen Sie die richtigen HTML-Tags im <head>-Abschnitt Ihrer Seite. Die wesentlichen Tags sind:

Der <link rel="icon">-Tag zeigt auf Ihr Haupt-Favicon. Moderne Browser unterstützen PNG direkt: <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">.

Der <link rel="apple-touch-icon">-Tag gibt das iOS-Startbildschirm-Symbol an. Apple-Geräte suchen nach diesem genauen Beziehungsattribut. Setzen Sie das sizes-Attribut für beste Ergebnisse auf 180x180.

Der <link rel="manifest">-Tag verbindet Ihr Web-App-Manifest, das die Android Chrome Icons mit ihren Größen und Zwecken auflistet. Dies ist für die PWA-Unterstützung unerlässlich.

Für Windows-Kacheln liefert der <meta name="msapplication-TileImage">-Tag die Kachelgrafik. Sie können auch <meta name="msapplication-TileColor"> festlegen, um die Kachelfarbe zu definieren.

Unser Generator stellt einfügefertigen HTML-Code für all diese Tags bereit. Kopieren Sie einfach den Code-Block in den Head-Bereich Ihrer Website, laden Sie die generierten Dateien in Ihr Stammverzeichnis hoch, und jede Plattform ist abgedeckt.

Favicon Best Practices für 2026

Halten Sie Ihr Favicon konsistent mit Ihrer Markenidentität. Das Symbol sollte die gleichen Farben und die gleiche visuelle Sprache wie Ihr Logo und Ihr Website-Design verwenden. Konsistenz über Berührungspunkte hinweg stärkt die Markenerkennung im Laufe der Zeit.

Testen Sie Ihr Favicon in mehreren Browsern und auf verschiedenen Geräten. Chrome, Firefox, Safari und Edge rendern Favicons jeweils leicht unterschiedlich. Was auf einem Browser scharf aussieht, kann auf einem anderen unscharf erscheinen, wenn die falsche Größe bereitgestellt wird.

Verwenden Sie das SVG-Favicon-Format, wo es unterstützt wird. Moderne Browser akzeptieren SVG-Favicons über <link rel="icon" type="image/svg+xml">. SVG skaliert perfekt auf jede Größe und unterstützt Dark-Mode-Media-Queries, sodass Sie Ihr Symbol an die Systemeinstellung des Nutzers anpassen können.

Cache-Busting beim Aktualisieren von Favicons. Browser speichern Favicons aggressiv im Cache. Fügen Sie nach dem Ändern Ihres Symbols einen Versions-Query-String hinzu oder ändern Sie den Dateinamen, um Browser zu zwingen, die neue Version abzurufen.

Fügen Sie schließlich immer einen ICO-Fallback unter /favicon.ico in Ihrem Site-Root ein. Einige Browser und Tools suchen noch nach diesem Standardpfad, unabhängig von dem, was Ihr HTML angibt. Seine Anwesenheit stellt sicher, dass keine Plattform ohne Ihr Markensymbol bleibt.