PWA-Icon-Generator
Generieren Sie PWA-Icons in den Größen 192x192 und 512x512 sowie eine vorkonfigurierte site.webmanifest-Datei aus einem einzigen Upload.
Click or drag image here
Supports PNG, JPG, SVG, WEBP
Datenschutz / Sicherheit
- Dateiverarbeitung nur im Browser
- Keine dauerhafte Speicherung von Uploads
- Automatisches Löschen nach der Generierung
Zielgruppe
- Frontend- / Full-Stack-Entwickler
- UI-/UX-Designer
- Indie-Entwickler
- SaaS-Gründer
Einsatzszenarien
- PWA-App-Icons
- „Zum Startbildschirm hinzufügen“ in Android Chrome
- Optimierte Installations-Erfahrung für Web-Apps
- Platzhalter-Icons für Anwendungen
PWA-Icons in wenigen Sekunden generieren
Progressive Web Apps (PWAs) benötigen bestimmte Icon-Größen und ein gültiges Web App Manifest. Dieses Tool erstellt automatisch alle benötigten PWA-Icons und eine einsatzbereite site.webmanifest-Datei aus einem einzigen Bild.
Was ist ein PWA-Icon?
PWA-Icons sind App-Symbole, die verwendet werden, wenn eine Progressive Web App auf einem Gerät installiert wird. Sie erscheinen an mehreren Stellen und verleihen Ihrer Web-App einen nativen Look:
- Android-Startbildschirm
- App-Launcher / App-Übersicht
- Task-Umschalter
- Splash Screens / Startbildschirme
Sauber konfigurierte PWA-Icons sorgen dafür, dass Ihre Web-App auf allen Geräten professionell und einheitlich wirkt.
Erforderliche PWA-Icon-Größen (Google-Empfehlung)
Android-Chrome-Icons
- 192x192 – Icon für den Startbildschirm
- 512x512 – Icon für App-Launcher und Splash Screen
Diese Größen sind erforderlich, um moderne PWA-Installationsprüfungen zu bestehen.
Von uns generierte Dateien
Icon-Dateien
- android-chrome-192x192.png
- android-chrome-512x512.png
Manifest-Datei
- site.webmanifest (vorkonfiguriert)
Beispiel:
{
"name": "My PWA App",
"short_name": "MyApp",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"display": "standalone"
}Warum favicon.pub für PWA-Icons nutzen?
- Icon-Größen gemäß Google-Empfehlungen
- Automatisch generierte Web App Manifest-Datei
- Kein manuelles Zuschneiden oder Exportieren nötig
- Funktioniert mit PNG-, JPG- und SVG-Quellen
- Kostenloser, sofortiger Download
So binden Sie PWA-Icons in Ihre Website ein
- Laden Sie Ihr Logo oder Icon hoch.
- Laden Sie die generierten PWA-Icons und das Manifest herunter.
- Legen Sie die Dateien im Root-Verzeichnis Ihrer Website ab.
- Fügen Sie den Link zum Manifest in Ihrem HTML ein.
<link rel="manifest" href="/site.webmanifest">PWA-Icon vs. Favicon
| Typ | Verwendung | Erforderliche Größen |
|---|---|---|
| Favicon | Browser-Tabs | 16x16, 32x32 |
| PWA-Icon | App-Installation und Start | 192x192, 512x512 |
Häufige Fragen
Brauche ich sowohl 192x192- als auch 512x512-Icons?
Ja. Moderne Browser erwarten beide Größen für eine korrekte PWA-Installation und um Warnungen in Lighthouse oder anderen Audit-Tools zu vermeiden.
Kann ich für PWAs SVG-Icons verwenden?
Für maximale Kompatibilität empfehlen wir PNG-Icons, auch wenn Ihre Ausgangsdatei ein SVG ist. Unser Generator erstellt PNGs, die zuverlässig in den meisten Browsern funktionieren.
Bild hochladen und jetzt PWA-Icons generieren