1. Bild hochladen
Laden Sie ein quadratisches Bild hoch (mindestens 512x512 px). Unterstützt: PNG, JPG, WebP.
Favicon-Generator
Erstellen Sie aus einem einzigen Bild favicon.ico und PNG-Symbole in allen erforderlichen Größen. Konform mit Browser- und Lighthouse-Anforderungen - alles läuft lokal in Ihrem Browser.
Vorschau und Favicon-Dateien
favicon.ico
Fertig! Favicon-Dateien wurden generiert. Die Dateiliste finden Sie unten.
favicon-16x16.png
Fertig! Favicon-Dateien wurden generiert. Die Dateiliste finden Sie unten.
favicon-32x32.png
Fertig! Favicon-Dateien wurden generiert. Die Dateiliste finden Sie unten.
apple-touch-icon.png
Fertig! Favicon-Dateien wurden generiert. Die Dateiliste finden Sie unten.
android-chrome-192x192.png
Fertig! Favicon-Dateien wurden generiert. Die Dateiliste finden Sie unten.
android-chrome-512x512.png
Fertig! Favicon-Dateien wurden generiert. Die Dateiliste finden Sie unten.
Warum braucht jede Website ein Favicon?
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.
So verwenden Sie den Favicon-Generator
Die Favicon-Generierung dauert nur wenige Sekunden:
2. Optionen wählen
Wählen Sie die gewünschten Größen und ob ein site.webmanifest generiert werden soll.3. ZIP herunterladen
Laden Sie alle generierten Dateien als ZIP-Archiv herunter und fügen Sie sie Ihrer Website hinzu.
| Datei | Größe | Verwendung |
|---|---|---|
| favicon.ico | 16×16 + 32×32 | Browser-Tab (Standard) |
| favicon-16x16.png | 16×16 | Browser-Tab (kleine Darstellung) |
| favicon-32x32.png | 32×32 | Browser-Tab (Retina) |
| apple-touch-icon.png | 180×180 | iOS-Startbildschirm, Safari |
| android-chrome-192x192.png | 192×192 | Android, PWA-Installation |
| android-chrome-512x512.png | 512×512 | PWA-Splashscreen, Google-Suchergebnisse |
| site.webmanifest | - | PWA-Konfiguration (optional) |
Welche Dateien werden generiert?
Das Tool generiert alle Favicon-Dateien, die von modernen Browsern und Lighthouse gefordert werden. Jede Datei hat eine bestimmte Rolle:
- favicon.ico - das klassische Format, das von allen Browsern unterstützt wird. Enthält 16×16 und 32×32 in einer Datei.
- Apple Touch Icon - wird auf dem iOS-Startbildschirm angezeigt, wenn ein Nutzer die Website als Lesezeichen hinzufügt.
- PWA-Symbole - für Android-Geräte und Progressive Web Apps. Werden bei der Installation auf dem Startbildschirm verwendet.
Wo wird das Favicon angezeigt?
Das Favicon erscheint an verschiedenen Stellen im Web:
Browser-Tabs
Das Favicon erscheint neben dem Seitentitel im Browser-Tab - der sichtbarste Ort.Lesezeichen und Verlauf
Browser verwenden das Favicon in der Lesezeichenleiste und im Browserverlauf.Startbildschirm (mobil)
Wenn ein Nutzer die Website zum Startbildschirm hinzufügt, wird das Apple Touch Icon oder PWA-Symbol verwendet.Google-Suchergebnisse
Google zeigt das Favicon neben der URL in den mobilen Suchergebnissen an.Lighthouse-Audit
Lighthouse prüft, ob ein Favicon vorhanden ist - es ist eine Best Practice für Web Performance.PWA-Installation
Bei der Installation einer PWA werden die 192×192- und 512×512-Symbole als App-Icon verwendet.
Wie laden Sie die generierten Dateien herunter?
Nach der Generierung der Icons stehen Ihnen mehrere Download-Optionen zur Verfügung:
Alle als ZIP herunterladen
Der Button Alle herunterladen packt alle generierten Dateien in ein einziges ZIP-Archiv. Die bequemste Option, wenn Sie das komplette Icon-Set benötigen.Einzelne Dateien herunterladen
Jedes generierte Icon hat einen eigenen Download-Button – Sie können eine einzelne Datei herunterladen, ohne das gesamte Set. Nützlich bei einer Aktualisierung einzelner Größen.
Welches Quellbild eignet sich am besten?
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.
Was macht diesen Favicon-Generator besonders?
Lighthouse-konform
Alle Größen, die Lighthouse und moderne Browser verlangen — in einem Schritt generiert.Volle Privatsphäre
Alle Dateien werden lokal in Ihrem Browser verarbeitet - nichts wird an einen Server gesendet.Alle Formate in einem Schritt
favicon.ico, PNG-Symbole und optional site.webmanifest - alles aus einem einzigen Bild.Ohne Limits
Favicons generieren — ohne Registrierung und ohne Einschränkungen.
Häufig gestellte Fragen zum Favicon-Generator
Weitere Tools entdecken
JPG/PNG-zu-WebP-Konverter
Reduzieren Sie die Dateigröße von Bildern ohne Qualitätsverlust. Konvertieren Sie JPG und PNG in WebP und beschleunigen Sie Ihre Website.
Online-Bildeditor
Bereiten Sie den perfekten Zuschnitt für Social Media oder Ihre Website vor. Wählen Sie ein fertiges Format oder geben Sie eigene Maße ein.
Favicon-Generator
Generieren Sie favicon.ico und PNG-Symbole aus einem einzigen Bild - konform mit Browser- und Lighthouse-Anforderungen.
Meta-Tag-Checker
Prüfen Sie die Zeichenanzahl und sehen Sie eine Vorschau Ihrer Seite in Google. Vermeiden Sie abgeschnittene Titel und Beschreibungen in den Suchergebnissen.
Wort- & Zeichenzähler
Überprüfen Sie die Textlänge und bewerten Sie, ob sie für eine Startseite, Dienstleistungsseite, einen Blogartikel oder eine Produktbeschreibung geeignet ist.
E-Mail-Signatur-Generator
Erstellen Sie in wenigen Minuten eine professionelle E-Mail-Signatur. Kopieren Sie den fertigen HTML-Code in Gmail oder Outlook.
Farbkontrast-Checker
Prüfen Sie, ob Ihre Text- und Hintergrundfarben gut lesbar sind. Das Tool berechnet den Kontrast gemäß WCAG und hilft bei der Farbwahl.
Bild-Farbextraktor
Laden Sie ein Foto oder Logo hoch und das Tool extrahiert die dominanten Farben. Kopieren Sie die Farbcodes mit einem Klick.
Farbpaletten-Generator
Wählen Sie eine Farbe und generieren Sie 9 Paletten: monochromatisch, komplementär, triadisch und mehr.
Kostenloser QR-Code-Generator
Erstellen Sie einen QR-Code für eine Website, vCard, Speisekarte oder einen Flyer. Export als PNG und SVG, ohne Anmeldung, ohne Limits.