PWA-Icon-Generator

Erzeugen Sie aus einem einzigen Bild die Icons, die eine installierbare Web-App braucht — 192- und 512px-PNGs plus eine site.webmanifest — vollständig in Ihrem Browser.

Datenschutz zuerst: Jedes Bild wird lokal in Ihrem Browser verarbeitet. Nichts wird auf einen Server hochgeladen, gespeichert oder übertragen.

Die Icons, die eine App installierbar machen

Ob eine Progressive Web App als installierbar gilt, hängt unter anderem an ihren Icons: Browser suchen nach einem Web-Manifest, das mindestens ein 192×192- und ein 512×512-PNG deklariert, bevor sie eine Installationsaufforderung anbieten oder ein ordentliches Icon auf dem Startbildschirm ablegen. Dieser Generator rendert beide aus Ihrem Quellbild und schreibt eine site.webmanifest, die sie referenziert — dazu das apple-touch-icon, das iOS möchte, und eine favicon.ico für gewöhnliche Tabs.

Für den Launcher in Form bringen

Android-Launcher maskieren Icons mitunter zu einem Kreis oder abgerundeten Quadrat, sodass Grafik, die bis an den Rand läuft, abgeschnitten werden kann. Fügen Sie hier Abstand und einen einfarbigen Hintergrund hinzu, und der wichtige Teil bleibt innerhalb des sicheren Bereichs, welche Maske auch angewendet wird; die Live-Vorschau zeigt das Ergebnis in jeder Größe. Alles wird mit der Canvas-API auf Ihrem Gerät gerendert — Ihr Logo wird nie hochgeladen — und der ganze Satz wird als ZIP heruntergeladen.

Häufig gestellte Fragen

Wird mein Bild hochgeladen, um das Favicon zu erstellen?
Nein. Die favicon.ico, die PNG-Icons und das Manifest werden alle lokal in Ihrem Browser über die Canvas-API erzeugt. Ihr Bild verlässt Ihr Gerät nie.
Welche Größen und Dateien erhalte ich?
Eine favicon.ico mit mehreren Auflösungen (16, 32 und 48 px), PNG-Icons in 16, 32, 48, 180 (apple-touch-icon), 192 und 512 px, eine site.webmanifest und einen HTML-Schnipsel zum Einfügen in Ihren <head>.
Kann ich eine PNG oder SVG in eine ICO umwandeln?
Ja. Legen Sie eine PNG, JPG, SVG oder WebP ab und laden Sie eine echte favicon.ico herunter. SVG-Logos werden zuvor lokal in hoher Auflösung gerastert.
Welches Bild eignet sich am besten?
Ein quadratisches Bild mit einem einfachen, kontrastreichen Logo. Nicht-quadratische Bilder werden mittig zugeschnitten; verwenden Sie die Abstands- und Formregler, um es nach Wunsch zu rahmen.
Wie installiere ich das Favicon?
Entpacken Sie das Paket in das Stammverzeichnis Ihrer Website und fügen Sie den mitgelieferten HTML-Schnipsel in den <head> Ihrer Seiten ein. Die favicon.ico wird von den meisten Browsern automatisch erkannt.