🌐 Favicon- & App-Icon-Generator
Ein Bild hochladen und sofort ein vollständiges Favicon-Paket herunterladen — PNG-Icons in allen Standardgrößen, eine Multi-Size-.ico-Datei und HTML-Link-Tags zum direkten Einfügen, alles in einer einzigen ZIP-Datei.
Über
Dieses Tool nutzt die Canvas API des Browsers, um dein Quellbild auf alle Größen zu skalieren, die moderne Browser und Betriebssysteme erwarten: 16×16, 32×32, 48×48, 64×64, 180×180 (Apple Touch Icon), 192×192 (Android / PWA) und 512×512 (PWA-Splash). Es erstellt außerdem eine Multi-Size-.ico-Datei, die alle gängigen Icon-Größen in einer einzigen Binärdatei bündelt, sowie einen HTML-Ausschnitt mit den korrekten <link>-Tags für jede Größe. Alles wird mit einem eingebetteten, speicherfreien ZIP-Writer in eine ZIP-Datei gepackt — keine externe Bibliothek notwendig. Da der gesamte Prozess im Browser mit Canvas abläuft, verlässt keine Datei dein Gerät.
Verwendung
- Ziehe dein Quellbild auf den Upload-Bereich oder klicke, um eine Datei auszuwählen — PNG, JPEG, SVG und WebP funktionieren alle.
- Das Bild in der Vorschau prüfen und die zu erzeugenden Größen bestätigen: 16, 32, 48, 64, 180, 192 und 512 px PNG sind standardmäßig ausgewählt.
- Auf 'Generieren' klicken, damit die Canvas API jede Icon-Größe direkt im Browser skaliert und rendert.
- Auf 'ZIP herunterladen' klicken, um alle PNGs, die Multi-Size-favicon.ico und eine HTML-Snippet-Datei in einem Archiv zu erhalten.
- Die <link>-Tags aus der HTML-Datei kopieren und in den <head> deiner Website einfügen — das Favicon ist fertig.
Häufige Fragen
- Welche Größen erzeugt dieses Tool?
- Es werden PNG-Dateien mit 16, 32, 48, 64, 180, 192 und 512 Pixeln erzeugt, eine Multi-Size-favicon.ico (mit 16, 32 und 48 px) sowie die passenden HTML-<link>-Tags.
- Wird mein Bild auf einen Server hochgeladen?
- Nein. Das gesamte Skalieren und Verpacken läuft im Browser mit der Canvas API. Dein Bild verlässt niemals dein Gerät.
- Welches Quellbild eignet sich am besten?
- Ein quadratisches Bild mit mindestens 512×512 px liefert in allen Größen die schärfsten Ergebnisse. SVG funktioniert besonders gut, da es auflösungsunabhängig ist.
- Was ist die Multi-Size-.ico-Datei und warum brauche ich sie?
- Eine .ico-Datei kann mehrere Auflösungen in einer einzigen Binärdatei bündeln. Ältere Browser und Windows verwenden die .ico für Tab-Icons und Verknüpfungen und wählen automatisch die passendste Größe aus. Ein Multi-Size-.ico sorgt für scharfe Icons überall.
- Brauche ich alle erzeugten Größen für meine Website?
- Für die meisten Websites decken das Multi-Size-.ico sowie die 180-px- (Apple Touch Icon) und 192/512-px-PNGs (PWA) alle wichtigen Anwendungsfälle ab. Die kleineren PNGs sind der Vollständigkeit und der Unterstützung älterer Browser wegen enthalten.