nicetool.dev logo

PWA-Asset-Generator - App-Icons & Manifest erstellen

Generieren Sie PWA-Icons und Manifest lokal in Ihrem Browser. Ihre Bilder verlassen niemals Ihr Gerät.

Bild hochladen

Ziehen Sie das Bild hierher oder klicken Sie, um eine Datei auszuwählen

Unterstützt PNG/JPEG, mindestens 512x512px

Manifest-Konfiguration

Icon Vorschau

192x192

192x192px

Android / Chrome

512x512

512x512px

Startbildschirm

180x180

180x180px

iOS Startbildschirm

512x512

512x512px

Maskierbar (Anpassbar)

Manifest Vorschau

HTML Links für Head
💡 Die gesamte Verarbeitung erfolgt clientseitig, um Privatsphäre und Geschwindigkeit zu gewährleisten.
Was ist der PWA Asset Generator?
Der PWA Asset Generator ist ein kostenloses Tool, das Ihnen hilft, alle notwendigen Assets für Progressive Web Apps (PWA) aus nur einem Quellbild zu erstellen. Das Tool generiert automatisch favicon.ico, apple-touch-icon, Icons in verschiedenen Größen (16x16, 32x32, 192x192, 512x512...) und eine vollständige manifest.json-Datei. Die gesamte Verarbeitung erfolgt clientseitig, was eine schnelle Geschwindigkeit und absolute Sicherheit für Ihre Bilder gewährleistet.
Standard PWA Icon Größen
Das Tool generiert automatisch Icons gemäß PWA- und Apple-Standards, einschließlich:
Favicon
favicon.ico (32x32) - Icon, das im Browser-Tab angezeigt wird
Mobil & Tablet
192x192, 384x384, 512x512 - Icons für Android und Startbildschirm
Apple Touch Icon
180x180 - Icon für iOS, wenn es zum Startbildschirm hinzugefügt wird
Verschiedene Größen
16x16, 32x32, 48x48, 72x72, 96x96, 120x120, 144x144, 152x152, 167x167
Manifest.json - Das Herz der PWA
Die Datei manifest.json ist die wichtigste Konfigurationsdatei für PWAs und enthält Informationen über:
  • •App-Name (name, short_name) - Wird bei der Installation angezeigt
  • •Icons - Liste aller Icons mit Größen und Verwendungszwecken
  • •Themenfarbe - Hauptfarbe für App-Leiste und Adressleiste
  • •Start-URL - Start-URL beim Öffnen der App vom Startbildschirm
  • •Anzeigemodus - Anzeigemodus (standalone, fullscreen...)
Hauptmerkmale
1
HD-Bild Hochladen
Unterstützt PNG/JPEG mit einer Mindestgröße von 512x512px für beste Qualität
2
Multi-Größen-Icon-Erstellung
Automatische Größenänderung und Erstellung von 13+ Icon-Größen nach PWA- und Apple-Richtlinien
3
Auto Manifest.json
Generiert Standard-manifest.json mit vollständigen Metadaten und Icon-Referenzen
4
Favicon.ico
Erstellt Standard-favicon.ico für SEO und Browser-Tab-Anzeige
5
Verarbeitung auf Client-Seite
100% browserbasierte Verarbeitung, Bilder werden nie auf den Server hochgeladen
6
ZIP-Download
Packt alle Dateien in eine praktische .zip-Datei
Anwendungsbeispiele
1
PWA-Entwicklung
Generieren Sie schnell Assets für Progressive Web App-Projekte und sparen Sie Stunden manueller Arbeit
2
Website-Branding
Erstellen Sie professionelle Favicons und Touch-Icons für Websites, um die Markenbekanntheit zu steigern
3
Mobile App Landing
Bereiten Sie Assets für installierbare Webseiten vor, die wie native Apps auf Mobilgeräten funktionieren
SEO & UX Vorteile
✓
Favicon erhöht die CTR in SERPs - Benutzer erkennen Ihre Website leichter
✓
PWA verbessert Core Web Vitals - Besseres Google-Ranking
✓
Apple Touch Icon - Native Erfahrung beim Hinzufügen zum iOS-Startbildschirm
✓
Vollständige manifest.json - Google indexiert und versteht Ihre App besser
Wichtige Hinweise
  • •Quellbild sollte mindestens 512x512px sein, empfohlen 1024x1024px
  • •Verwenden Sie Bilder mit transparentem Hintergrund (PNG) für beste Ergebnisse
  • •Die gesamte Verarbeitung erfolgt lokal, Bilder werden nicht auf den Server hochgeladen
  • •Die ZIP-Datei enthält: favicon.ico, Icons (13 Größen), manifest.json
 So verwenden Sie: PWA-Asset-Generator
  1. 1
    Laden Sie ein quadratisches PNG- oder JPEG-Logo mit mindestens 512 x 512 Pixeln hoch. Einfache Formen mit etwas Rand wirken in kleinen Größen am besten.
  2. 2
    Füllen Sie die Manifest-Felder aus: App-Name, Kurzname (unter dem Homescreen-Icon), Beschreibung, Start-URL, Theme- und Hintergrundfarbe.
  3. 3
    Aktivieren Sie bei Bedarf die runde Maske und prüfen Sie die Vorschau für Android, iOS, Splashscreen und maskierbares Icon.
  4. 4
    Mit Generate & Download erhalten Sie ein ZIP mit allen Icon-Größen und manifest.json. Kopieren Sie die angezeigten Link-Tags in den <head> Ihrer Website.
 Praxisbeispiele
Website installierbar machen
Chrome und Edge bieten "App installieren" nur an, wenn ein gültiges Manifest mit 192- und 512-Pixel-Icons vorhanden ist. Die erzeugten Dateien erfüllen das.
iOS-Homescreen-Icons
Safari ignoriert Manifest-Icons und nutzt apple-touch-icon. Das ZIP enthält ein 180 x 180-Icon samt passendem Link-Tag.
Maskierbare Icons für Android
Android schneidet Icons je nach Gerät rund, als Squircle oder abgerundet zu. Ein maskierbares Icon hält das Logo in der sicheren Zone, damit nichts abgeschnitten wird.
Schnelles Rebranding
Ändert sich das Logo, laden Sie die neue Datei einmal hoch und ersetzen das ganze Icon-Set, statt ein Dutzend Größen von Hand zu exportieren.
 Häufige Fragen
Was ist ein Web-App-Manifest?+
manifest.json ist eine kleine JSON-Datei, die dem Browser Name, Icons, Farben und Start-URL Ihrer Web-App mitteilt. Erst damit lässt sich eine Website wie eine native App installieren und starten.
Welche Icon-Größen sind wirklich nötig?+
Für die Installierbarkeit verlangt Chrome mindestens 192 x 192 und 512 x 512. iOS nutzt ein apple-touch-icon mit 180 x 180. Weitere Größen sorgen auf manchen Launchern und älteren Geräten für schärfere Icons.
theme_color oder background_color?+
theme_color färbt Browserleiste und App-Umschalter. background_color füllt den Splashscreen während des Ladens und sollte zum Hintergrund des ersten Bildschirms passen.
Werden meine Bilder hochgeladen?+
Nein. Skalieren und ZIP-Erstellung laufen mit der Canvas-API im Browser, unveröffentlichte Logos verlassen Ihr Gerät also nie.