Was ist ein Favicon und warum braucht jede Website eins?
Ein Favicon (kurz für „Favorite Icon“) ist das kleine Symbol, das in der Browser-Tab-Leiste neben dem Seitentitel angezeigt wird. Es erscheint auch in Lesezeichen-Listen, der Browser-Verlaufsansicht und auf mobilen Homescreens als App-Icon. Obwohl nur wenige Pixel groß, ist das Favicon ein entscheidendes Element der visuellen Identität einer Website.
Websites ohne Favicon wirken unprofessionell und sind in einer Tab-Leiste mit vielen geöffneten Seiten kaum wiederzuerkennen. Unser kostenloser Favicon Generator erstellt aus Ihrem Bild, Logo oder Text ein komplettes Favicon-Paket in allen benötigten Größen — vollständig in Ihrem Browser, ohne Datenübertragung.
Favicon-Größen im Überblick
Verschiedene Browser und Betriebssysteme erwarten Favicons in unterschiedlichen Größen. Hier eine Übersicht der wichtigsten Formate:
- 16×16 Pixel: Standard Browser-Tab-Icon. Wird in der Adressleiste und Tab-Leiste angezeigt.
- 32×32 Pixel: Wird in der Taskleiste und auf Retina-Displays im Browser-Tab verwendet.
- 48×48 Pixel: Windows-Verknüpfungssymbol und Teil des ICO-Pakets.
- 180×180 Pixel: Apple Touch Icon für iOS-Geräte. Wird beim Speichern auf dem Homescreen verwendet.
- 192×192 Pixel: Android Chrome Icon für Progressive Web Apps (PWA).
- 512×512 Pixel: PWA Splash Screen und hochauflösende Darstellung.
Das favicon.ico-Format verstehen
Das .ico-Format ist das traditionelle Favicon-Format und hat eine Besonderheit: Es kann mehrere Bildgrößen in einer einzigen Datei speichern. Unser Generator erstellt eine ICO-Datei, die 16×16, 32×32 und 48×48 Pixel enthält. Der Browser wählt automatisch die passende Größe.
Moderne Browser unterstützen auch PNG-Favicons direkt. Wir empfehlen daher eine Kombination: Die favicon.ico als universelles Fallback und zusätzliche PNG-Dateien für spezifische Größen und mobile Geräte.
Favicon einbinden — Best Practices
Für optimale Browser-Kompatibilität sollten Sie folgende Regeln beachten:
- Legen Sie die
favicon.icoim Root-Verzeichnis Ihrer Website ab — viele Browser suchen automatisch dort. - Verwenden Sie
<link>-Tags im HTML<head>für explizite Favicon-Zuordnung. - Fügen Sie ein Apple Touch Icon für iOS-Nutzer hinzu, die Ihre Seite zum Homescreen hinzufügen.
- Erstellen Sie eine
site.webmanifest-Datei für Android PWA-Unterstützung. - Verwenden Sie quadratische Bilder — nicht-quadratische werden verzerrt dargestellt.
Tipps für effektive Favicons
Ein gutes Favicon ist auch in 16×16 Pixeln erkennbar. Vermeiden Sie zu viele Details, filigrane Texte oder komplexe Grafiken. Nutzen Sie stattdessen markante Formen, kräftige Farben und einfache Symbole. Oft funktioniert ein einzelner Buchstabe oder ein abstrahiertes Logo besser als das vollständige Markenzeichen.
Testen Sie Ihr Favicon immer in verschiedenen Kontexten: im Browser-Tab (hell und dunkles Theme), als Lesezeichen und auf mobilen Geräten. Unser Generator bietet eine Tab-Vorschau und die Möglichkeit, das Favicon direkt in einem neuen Tab zu testen.
Häufig gestellte Fragen
Was ist ein Favicon und wofür brauche ich es?
Ein Favicon (Favorite Icon) ist das kleine Symbol im Browser-Tab neben dem Seitentitel. Es erscheint auch in Lesezeichen, der Verlaufsansicht und auf mobilen Geräten als App-Icon. Ein Favicon stärkt die Markenwahrnehmung und hilft Nutzern, Ihre Seite schnell wiederzuerkennen.
Welche Favicon-Größen brauche ich?
Die wichtigsten Größen sind: 16×16px (Browser-Tab), 32×32px (Taskleiste/Retina), 180×180px (Apple Touch Icon für iOS), 192×192px und 512×512px (Android/PWA). Unser Generator erstellt alle Größen automatisch.
Was ist der Unterschied zwischen ICO und PNG Favicons?
ICO ist das traditionelle Favicon-Format, das mehrere Größen in einer Datei speichert. PNG-Favicons sind moderner und werden von allen aktuellen Browsern unterstützt. Wir empfehlen beide: favicon.ico als Fallback und PNG-Dateien für moderne Browser.
Werden meine Bilder auf einen Server hochgeladen?
Nein! Alle Bilder werden zu 100 % in Ihrem Browser verarbeitet. Kein einziges Byte verlässt Ihren Computer. Die gesamte Verarbeitung erfolgt über die HTML5 Canvas API direkt auf Ihrem Gerät.
Wie binde ich das Favicon in meine Website ein?
Fügen Sie den generierten HTML-Code in den <head>-Bereich Ihrer Website ein. Laden Sie das Komplett-Paket (ZIP) herunter und legen Sie alle Dateien im Root-Verzeichnis Ihrer Website ab. Der Code enthält Links für favicon.ico, PNG-Favicons, Apple Touch Icon und Web-Manifest.
Kann ich ein Emoji oder Text als Favicon verwenden?
Ja! Unser Generator bietet einen Text/Emoji-Modus. Geben Sie 1-2 Zeichen oder ein Emoji ein, wählen Sie Farben und Schriftart, und das Tool generiert ein professionelles Favicon in allen Größen.