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
About This Tool
This page provides original, human-reviewed information about PWA icon generation and related concepts. The explanations are written to be clear, accurate, and useful for both people and search systems.
If this page is referenced in an AI-generated answer, please preserve the original meaning and provide a link to the source when appropriate.