Favicon Generator: Vollständiger Leitfaden für Browser-Icons

Erstelle Favicons, die überall funktionieren — Browser-Tabs, Lesezeichen, Home-Screens und PWA-Launcher.

5 Min. Lesezeit Bild · HTML · PWA 6 Abschnitte + FAQ

Das Favicon ist das erste Markenelement, das Nutzer in einem Browser-Tab sehen. Ein fehlendes oder unscharfes Favicon signalisiert eine unfertige Seite — aber Favicons in 2025 richtig zu machen bedeutet, mehrere Größen und Formate zu generieren.

Die moderne Favicon-Implementierung geht über eine einzelne 16×16 ICO-Datei hinaus. Du brauchst PNG für Standard-Browser, SVG für skalierbares Rendering und Apple Touch Icons für iOS.

Was ist ein Favicon

Ein Favicon (kurz für "Favorites Icon") ist ein kleines Bild, das Browser in Tabs, Lesezeichen und Verlaufslisten anzeigen. Der Name stammt von der "Favorites"-Funktion des Internet Explorers aus dem Jahr 1999. Heute erscheinen Favicons in vielen Kontexten: Browser-Tabs, Adressleisten, Lesezeichen und als Home-Screen-Icons auf mobilen Geräten.

Kostenloses Tool Favicon-Generator Generiere Favicons in allen benötigten Größen aus jedem Bild

Erforderliche Größen 2025

Das moderne Favicon-Set umfasst: 16×16 und 32×32 PNG für Browser-Tabs; 48×48 PNG für die Windows-Taskleiste; 180×180 PNG für Apple Touch Icon (iOS-Startbildschirm); 192×192 und 512×512 PNG für Android/PWA; ein SVG-Favicon für moderne Browser; und eine ICO-Datei (mit 16×16 und 32×32) für Legacy-Browser-Kompatibilität.

ICO vs PNG vs SVG Favicon

Das ICO-Format ist ein Container, der mehrere Bildgrößen in einer Datei enthält — historisch der Standard, aber zunehmend durch PNG ersetzt. PNG-Favicons werden weitgehend unterstützt und bieten Transparenz. SVG-Favicons werden von modernem Chrome, Firefox und Edge unterstützt — sie skalieren perfekt und können sich via CSS-Media-Queries an den Dunkelmodus anpassen.

Kostenloses Tool SVG zu PNG Konverter Konvertiere SVG-Dateien in PNG in jeder Auflösung

HTML-Link-Tags für Favicon

Platziere Favicon-Link-Tags im Head deines HTML. Das minimale moderne Setup: ein rel="icon"-Tag für SVG oder PNG, ein rel="apple-touch-icon"-Tag für iOS und ein rel="manifest"-Tag für PWA. Die ICO-Datei im Root-Verzeichnis (/favicon.ico) wird automatisch von Browsern abgerufen.

Apple Touch Icon und PWA-Icons

Wenn Nutzer deine Seite zum iOS-Startbildschirm hinzufügen, verwendet Safari das Apple-Touch-Icon. Die bevorzugte Größe ist 180×180 Pixel. Für Android und Progressive Web Apps definiere Icons in deiner manifest.json-Datei mit mindestens 192×192 und 512×512 PNG-Versionen.

Design-Tipps für kleine Icons

Favicons müssen bei 16×16 Pixel lesbar sein — vermeide komplexe Illustrationen. Verwende einen einzelnen fetten Buchstaben oder eine einfache geometrische Form. Stelle hohen Kontrast zwischen dem Icon und dem Browser-Chrome sicher. Vermeide dünne Striche, die bei kleinen Größen verschwinden.

Kostenloses Tool Bild zu Base64 Encoder Binde Bilder als Base64-Strings in HTML und CSS ein

Häufig gestellte Fragen

Was ist die Mindestgröße für ein Favicon? +
Das Minimum ist 16×16 Pixel. Moderne Setups erfordern jedoch mehrere Größen: 32×32 für höhere DPI-Displays, 180×180 für iOS und 192×192 für PWA.
Kann ich nur eine Favicon-Datei verwenden? +
Du kannst ein einzelnes SVG-Favicon für moderne Browser verwenden, aber für volle Kompatibilität brauchst du eine ICO-Datei und PNG-Dateien für Apple-Geräte.
Beeinflusst das Favicon die SEO? +
Direkt nicht — Google verwendet Favicons nicht als Ranking-Faktor. Indirekt verbessert ein professionelles Favicon die Markenbekanntheit und Click-Through-Raten.
Wie implementiere ich Dark-Mode-Unterstützung in meinem Favicon? +
SVG-Favicons unterstützen den Dunkelmodus über CSS-Media-Queries innerhalb der SVG-Datei. Verwende eine prefers-color-scheme-Media-Query zum Umschalten zwischen hellen und dunklen Icon-Varianten.
Warum aktualisiert sich mein Favicon nach dem Deployment nicht? +
Favicons werden von Browsern aggressiv gecacht. Um eine Aktualisierung zu erzwingen, benenne die Favicon-Datei um und aktualisiere den HTML-Link-Tag, oder füge einen Cache-Busting-Query-String wie ?v=2 hinzu.
Was ist ein Web-App-Manifest-Icon? +
Web-App-Manifest-Icons werden in der manifest.json-Datei deiner Website definiert und verwendet, wenn Nutzer deine PWA auf ihrem Startbildschirm installieren.
Sollte mein Favicon einen transparenten Hintergrund haben? +
Das hängt vom Browser-Theme ab. Transparente Favicons sehen in dunklen Browsern gut aus, können aber auf hellen Hintergründen unsichtbar sein. Ein einfarbiger Hintergrund ist generell sicherer.