🌐 Favicon- & App-Icon-Generator

Über

Dieses Tool verwendet die Canvas API des Browsers, um das Quellbild in jede Größe 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 auch eine mehrfachgrößige .ico-Datei, die die 16-, 32- und 48-px-Ikonen in eine einzige Binärdatei packt, schreibt eine site.webmanifest, die die 192- und 512-px-Ikonen auflistet (name und short_name bleiben leer und können von Ihnen ausgefüllt werden), und generiert den HTML-Ausschnitt mit den korrekten <link>-Tags. Wenn das Bild nicht quadratisch ist, können Sie das ganze Bild mit transparenten Randbereichen beibehalten oder die Kanten zuschneiden, um das Quadrat zu füllen. Alles wird mit einem eingebetteten ZIP-Writer im Store-Modus (ohne Komprimierung) in eine ZIP gebündelt, und die .ico kann auch separat heruntergeladen werden. Da der gesamte Prozess im Browser mit Canvas läuft, verlässt keine Datei das Gerät.

Verwendung

1. Die Ikonen werden in dem Moment generiert, in dem Sie ein Bild auswählen, daher gibt es keine Schaltfläche „Generieren“. Überprüfen Sie die Vorschauen von 16 bis 512 px und die Größe des Quellbildes. Bei einem nicht-quadratischen Bild entscheiden Sie, ob Sie das ganze Bild mit Randbereichen beibehalten oder das Quadrat füllen und die Kanten zuschneiden möchten.
2. Klicken Sie auf „ZIP herunterladen“, um alle PNGs, die mehrfachgrößige favicon.ico, site.webmanifest und eine HTML-Ausschnitt-Datei in einem Archiv zu erhalten. Wenn Sie nur die .ico-Datei benötigen, klicken Sie auf „Nur .ico herunterladen“.
3. Klicken Sie auf „HTML-Tags kopieren“ (oder öffnen Sie head-snippet.html) und fügen Sie die <link>-Tags in den <head> der Website ein.
4. Laden Sie die Dateien in den Stammordner der Website hoch und füllen Sie anschließend name und short_name in der site.webmanifest aus.

Häufige Fragen

Welche Größen generiert dieses Tool?

Es generiert PNG-Dateien in den Größen 16, 32, 48, 64, 180, 192 und 512 Pixel, ein mehrteiliges favicon.ico (mit 16, 32 und 48 px), ein site.webmanifest, das die 192 und 512 px-Icons auflistet, und 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 von mindestens 512×512 px liefert in allen Größen die schärfsten Ergebnisse. SVG funktioniert besonders gut, da es auflösungsunabhängig ist. Ist das Bild nicht quadratisch, kann das gesamte Bild mit transparenten Rändern beibehalten (Standard) oder das Quadrat durch Abschneiden der Kanten gefüllt werden. Ist ein Rasterbild kleiner als 512 px, werden die größeren Icons vergrößert und das Tool zeigt einen Hinweis an.

Was ist die Multi-Size-.ico-Datei und warum brauche ich sie?

Eine .ico-Datei kann mehrere Auflösungen in einer Binärdatei einbetten. Ältere Browser und Windows verwenden die .ico für Registerkarten-Ikonen und Verknüpfungen und wählen automatisch die beste Größe aus. Die .ico von diesem Tool enthält 16, 32 und 48 Pixel-Ikonen, und Sie können sie separat herunterladen, ohne das ZIP-Archiv.

Brauche ich alle erzeugten Größen für meine Website?

Für die meisten Websites decken das mehrteilige .ico plus die 180 px (Apple Touch Icon) und 192/512 px (PWA) PNGs zusammen mit dem site.webmanifest alle wichtigen Anwendungsfälle ab. Die kleineren PNGs sind der Vollständigkeit halber und zur Unterstützung älterer Browser enthalten.

Wurde 38 Mal in den letzten 29 Tagen ausgeführt. Ergebnis kopiert oder heruntergeladen: 89% Gemessen auf unseren eigenen Servern, 2026-10-05–2026-11-03.