Favicon aus einem Logo erstellen: Größen, Formate und Checkliste
Erstelle ein scharfes Favicon aus deinem Logo, wähle passende SVG-, PNG- und ICO-Größen und vermeide Details, die im Browser-Tab verschwinden.
Kurzantwort
Um ein Favicon aus einem Logo zu erstellen, verwendest du den wiedererkennbarsten Teil des Zeichens, setzt ihn auf eine quadratische Fläche und entfernst kleine Schrift. Prüfe das Ergebnis bei 16 und 32 Pixeln. Mit dem Favicon-Generator erstellst du die Basis; sinnvoll sind anschließend eine SVG-Masterdatei und PNG-Fallbacks.
Den richtigen Teil des Logos auswählen
Eine breite Wortmarke wird im Browser-Tab meist unlesbar. Besser funktionieren Monogramm, Bildmarke oder ein einzelner kräftiger Buchstabe. Achte auf hohen Kontrast und freien Raum. Liegt nur eine unscharfe Pixelgrafik vor, solltest du zuerst das Logo vektorisieren, damit Rundungen beim Verkleinern sauber bleiben.
| Vorlage | Sinnvolle Umsetzung | Typisches Problem |
|---|---|---|
| Bildmarke mit Wortmarke | Nur die Bildmarke nutzen | Text wird zu einem dunklen Strich |
| Buchstabenlogo | Ein bis zwei Zeichen zentrieren | Dünne Linien verschwinden |
| Detaillierte Illustration | Auf Silhouette reduzieren | Kleine Formen laufen zusammen |
| Transparentes Logo | Auf hell und dunkel testen | Zu wenig Kontrast am Rand |
Favicon-Dateien erstellen
- Setze das Zeichen auf eine quadratische 1:1-Fläche.
- Wähle bewusst Transparenz oder eine feste Hintergrundfarbe.
- Prüfe 16, 32 und 48 Pixel statt nur die vergrößerte Vorschau.
- Exportiere SVG sowie PNG-Fallbacks, zum Beispiel mit 48, 192 und 512 Pixeln.
- Verlinke das Favicon im Head und ändere seine URL nicht ständig.
Google verlangt ein quadratisches Favicon und empfiehlt eine Quelle mit mehr als 48 mal 48 Pixeln. Die jeweils aktuellen Anforderungen stehen in der offiziellen Google-Dokumentation.
Checkliste für ein gutes Favicon
- Die Hauptform ist bei 16 Pixeln erkennbar.
- Unterzeilen und feine Rechtstexte wurden entfernt.
- Transparente Kanten sind sauber.
- Helle und dunkle Browserdarstellung funktionieren.
- Die Datei ist öffentlich crawlbar und hat eine stabile URL.
- Die SVG ist optimiert, ohne die viewBox zu entfernen.
Häufige Fragen
Welche Größe sollte ein Favicon haben?
Nutze eine skalierbare Masterdatei und teste 16 sowie 32 Pixel. Für Google muss das Favicon quadratisch und mindestens 8 mal 8 Pixel groß sein; empfohlen wird eine Quelle über 48 mal 48 Pixel.
Ist SVG, PNG oder ICO besser?
SVG bleibt in modernen Browsern scharf und kompakt. PNG ist ein zuverlässiger Fallback, während ICO ältere Größen bündeln kann. Ein vollständiges Set darf alle drei enthalten.
Kann ich das vollständige Logo verwenden?
Nur wenn es in Tab-Größe noch eindeutig bleibt. Bei horizontalen Logos sind Bildmarke oder Initialen fast immer besser.