Wähle deine Grafik
Lade ein SVG hoch für die schärfsten Icons und ein SVG-Favicon, oder ein PNG, JPG, WebP oder HEIC. Angemeldet kannst du stattdessen eines deiner freigeschalteten Ergebnisse wählen.
Favicon- und PWA-Icon-Generator
Ein Upload, alle Icons, die ein Browser-Tab oder ein Homescreen braucht, plus die Tags, die darauf verweisen.
Favicon-Set erstellen
SVG, PNG, JPG, WebP, HEIC · bis 8 MB · kostenlos für eigene Dateien und freigeschaltete Ergebnisse
Was dieses Tool macht
Erstellt aus einem Bild alle Icons, die deine Website braucht: favicon.ico, PNG-Favicons, ein SVG-Favicon (aus einem SVG), ein Apple Touch Icon in deiner Hintergrundfarbe und Web-App-Icons – auch maskierbare, die klar bleiben, wenn ein Smartphone sie auf seine eigene Form zuschneidet. Die ZIP enthält außerdem site.webmanifest und favicon.html, die Tags zum Einfügen in deine Seiten. Ein PNG, JPG, WebP oder HEIC bekommt alle Icons außer dem SVG-Favicon; dieses Tool zeichnet keine Bilder nach.
Aus Sicherheitsgründen werden Skripte, Animationen, eingebettete Webinhalte, Links und alles, was eine andere Datei lädt, entfernt; deine Grafik und eingebettete PNG-, JPEG- oder WebP-Bilder bleiben. Das Ergebnis listet alles Entfernte auf.
Eingaben, Ausgaben und Limits
Eingabe
SVG, PNG, JPEG, WebP oder HEIC
Ausgabe
ZIP mit favicon.ico, PNG-Favicons, einem SVG-Favicon (bei SVG-Vorlagen), einem Apple Touch Icon, PWA-Icons, site.webmanifest und den HTML-Tags
Limits
Dateien bis 8 MB; PNG-, JPG- und WebP-Bilder bis 24 Megapixel, vor dem Export auf 1.536 px skaliert. Es erstellt favicon.ico mit Bildern in 16, 32, 48 px, PNG-Favicons in 16 und 32 px, ein Apple Touch Icon mit 180 px und App-Icons mit 192 und 512 px, jeweils auch als maskierbares Icon, dessen Grafik im sicheren Bereich bleibt (ein zentrierter Kreis mit einem Radius von 40 % der Icon-Größe). Bearbeitungslimit: 30 s.
So funktioniert's
Benennen und Farben wählen
Name und Kurzname kommen ins Web-Manifest. Die Designfarbe ist der Farbton, den manche Browser ihrer Oberfläche geben; die Hintergrundfarbe füllt das Apple Touch Icon und die maskierbaren Icons.
Dateien hochladen und Tags einfügen
Leg alle Dateien aus der ZIP in den Ordner, den du als Pfad-Präfix angegeben hast, und füge dann die Tags aus favicon.html in den Head jeder Seite ein. Die README in der ZIP erklärt, wofür jede Datei ist.
Problemlösung
Warum gibt es kein favicon.svg?
Ein SVG-Favicon entsteht nur aus einem SVG, das komplett aus Vektorgrafik besteht. Ein PNG, JPG, WebP oder HEIC oder ein SVG mit einem eingebetteten Bild bekommt stattdessen die PNG- und ICO-Favicons, und das Ergebnis weist darauf hin.
Das alte Icon wird noch angezeigt
Browser behalten Favicons lange im Cache. Öffne die Seite in einem privaten Fenster oder lösche die Website-Daten, um die neuen Dateien zu sehen.
Mein Logo wirkt im maskierbaren Icon klein
Launcher können ein maskierbares Icon kreisförmig zuschneiden, deshalb wird die Grafik so skaliert, dass sie in den runden sicheren Bereich passt. Verringere den Innenabstand, um sie zu vergrößern; ein rundes Zeichen kann den ganzen Kreis ausfüllen.
Ändert das Pfad-Präfix das Manifest?
Nein. Die Icon-Pfade in site.webmanifest sind relativ zum Manifest und funktionieren daher in jedem Ordner, solange die Dateien zusammenbleiben. Das Präfix legt die Pfade in favicon.html fest.
Zugang und Preise
Dieses Tool verbraucht keine Credits, wenn du es auf eine hochgeladene Datei oder ein bereits freigeschaltetes Ergebnis anwendest. Dateien werden für Gäste 24 Stunden und mit Konto 30 Tage aufbewahrt. Siehe Preise.