PWA Assets Generator
PWA App Icons und iOS Splash Screens
für die Progressive Web App
miTT PWA Asset Generator ist ein kostenloses Tool zur Erstellung von App Icons für Ihre Progressive Web App (PWA) und ios Splash Screens. Es hilft Ihnen für die Wordpress PWA Plugin wie miTT PWA, Joomla PWA PWA Plugin oder jede andere Web-App bzw. PWA.
PWA Assets generieren
für WordPress
für Joomla
oder jede andere Web-App
- unterstützte Bildformate: png, jpg, webp
- empfohlene Icon Größe : 512x512px
- Seitenverhältnis: 1:1
Nach dem Ausfüllen der Felder und dem Hochladen des Bildes,
wird ein Zip-Ordner mit den generierten Icons und iOS Splash Screens
für PWA erstellt und zum Download bereitgestellt.
Erstellung benutzerdefinierte App Icon und Splash-Screens für Ihre PWA
Bei der Entwicklung einer Progressive Web App ist die Effizienz bei der Erstellung konsistenter Assets entscheidend. PWA-Asset-Generatoren, wie das kostenlose Tool miTT PWA Asset Generator, sind wichtige Werkzeuge, die Icons und Splash-Screens schnell und einheitlich für verschiedene Plattformen erstellen.
Das Wichtigste
- miTT PWA Asset Generator vereinfacht die Erstellung von Icons und Splash Screens für Progressive Web Apps, indem er Entwicklern ermöglicht, Assets zu generieren, die den Web App Manifest-Spezifikationen entsprechen und auf allen Geräten nativ aussehen.
- PWA-Assets wie Icons, Splash Screens und maskable Icons sind von grundlegender Bedeutung für die Verbesserung des Benutzererlebnisses, wobei die Generatoren plattformspezifische Anforderungen berücksichtigen und die Möglichkeit bieten, benutzerdefinierte Assets für verschiedene Ausrichtungen und Anzeigemodi zu erstellen.
- Die Bilder werden in miTT PWA für WordPress und miTT PWA für Joomla hochgeladen.
Die Bilder werden in miTT PWA für WordPress und miTT PWA für Joomla hochgeladen.
Der Schlüssel zu einer visuell ansprechenden PWA liegt in den Details. Der Kern ermöglicht die Aufmerksamkeit auf die PWA-Icons und Splash-Screens, die mehr als nur hübsche Bilder sind. Diese generierten Bildobjekte entsprechen den Spezifikationen für Web-App-Manifeste und sorgen dafür, dass Ihre PWA auf jedem Gerät tadellos aussieht. Einige wichtige Assets sind zu beachten:
- PWA Icons repräsentieren Ihre PWA auf dem Startbildschirm und in der App-Schublade des Benutzers. Sie sollten visuell ansprechend und leicht zu erkennen sein.
- Splash-Screens: Diese Bildschirme erscheinen, wenn der Benutzer Ihre PWA startet, und sorgen für einen reibungslosen Übergang vom Startbildschirm zur App-Oberfläche.
- Maskable Icons: Diese Icons sind so gestaltet, dass sie perfekt in die verschiedenen Symbolformen passen, die von den verschiedenen Geräteplattformen vorgegeben werden, und bieten ein Maß an Individualisierung, das die Benutzererfahrung verbessert.
Wenn Sie auf diese Details achten und die richtigen Assets verwenden, können Sie eine optisch ansprechende PWA erstellen, die das Benutzererlebnis verbessert.
Startbildschirme sind der erste Eindruck, den Ihre App bei einem Benutzer hinterlässt. PWA Asset Tools berücksichtigen die statischen Spezifikationsdaten und generieren Splash-Screens, die auf die einzigartigen Anforderungen verschiedener Plattformen zugeschnitten sind, wie z. B. die spezifischen Meta-Tags und Manifestdateien von Android und iOS. iOS benötigt den Splash-Screen in Form von Bildern, während Android dies über das Manifest die Icons abruft.
Icons und Splash Screens PWA für WordPress und PWA für Joomla
Der miTT PWA-Asset-Generator wurde entwickelt, um Splash-Screens und Icons für miTT PWA-Plugins zu generieren. Dies hilft Website-Administratoren schnell die PWA von CMS wie WordPress und Joomla einzurichten. Nach der Erstellung von Splash Screens und Icons können diese in den Ordner hochgeladen werden.
miTT PWA geht über die Ästhetik hinaus und unterstützt den Service-Worker-Lebenszyklus, um das Caching statischer Dateien zu verwalten und sicherzustellen, dass Ihre PWA immer mit den neuesten Inhalten aktualisiert wird. Die Manifest-Einstellungen in miTT PWA sind besonders erwähnenswert, da sie es Ihrer PWA ermöglichen, auf der zuletzt besuchten Seite zu starten, was das Verhalten einer nativen App nachahmt und die Benutzererfahrung verbessert.
Frequently Asked Questions (FAQ) PWA Asset GeneratorEin PWA-Asset-Generator vereinfacht die Erstellung von Assets für Progressive Web Apps, wie z. B. PWA-Icons und Splash Screens für PWA für Android und iOS.
miTT PWA Asset Generator ist ein kostenloses Tool zur Erstellung von Icons und Splash Screens.
Die gestreckten Startbildschirme auf Ihrer PWA für iPads mit iOS 13 oder neuer werden durch einen Fehler in Safari verursacht, der fälschlicherweise Hochformat-Startbildschirme für die Querformatansicht verwendet.
Die Verwendung von maskable Icons für Ihre PWA stellt sicher, dass Ihre App-Symbole korrekt angezeigt und nicht abgeschnitten oder minimiert werden, unabhängig von den Anforderungen an die Symbolform des Geräts oder Betriebssystems. Dies trägt dazu bei, ein konsistentes und professionelles Benutzererlebnis zu schaffen.
Wenn man PWA-Assets mit Tools wie dem PWA Asset Generator erstellt haben und sie in CMS-Plattformen wie WordPress und Joomla integrieren müssen, kann man Plugins wie miTT PWA (WordPress PWA und Joomla PWA) verwenden. Stellen Sie einfach sicher, dass die Icons gemäß den Anweisungen in der miTT PWA-Dokumentation in den entsprechenden Ordner hochladen.
Die Einbindung von visuell beeindruckenden PWA-Assets in Ihre Webanwendung kann eine schwierige Aufgabe sein, aber mit dem miTT PWA Asset Generator ist es ganz einfach.
- die App-Icons in das Manifest einbinden
- die Meta Tags für iOS Icon and splash screen im head hinzufügen
- Prüfung des Manifests, der Icons und Splash Screens für iOS
Manifest Icons
Das Manifest ist eine JSON-Datei, die im Head enthalten ist. Die Icon Implementation könnte wie folgt aussehen.
"icons": [
{
"src": "/images/icons/manifest-icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
"src": "/images/icons/manifest-icon-512.maskable.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "/images/icons/manifest-icon.svg",
"sizes": "any",
"type": "image/svg"
},
]
iOS Icons and Splash Screens
Um das iOS-Icon und das Splash-Screen-Image zu implementieren, sollte man den folgenden Code in den Kopf der Website einfügen. Hier wird nur ein Beispiel für den Splash Screen gezeigt.
<link href="https://my.app/images/icons/apple-icon-180.png" rel="apple-touch-icon" sizes="180x180">
<link href="https://my.app/images/icons/apple-splash-2048-2732.png" rel="apple-touch-startup-image" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link href="https://my.app/images/icons/apple-splash-2732-2048.jpg" rel="apple-touch-startup-image" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link href="https://my.app/images/icons/apple-splash-1668-2388.jpg" rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link href="https://my.app/images/icons/apple-splash-2388-1668.jpg" rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link href="https://my.app/images/icons/apple-splash-1536-2048.jpg" rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link href="https://my.app/images/icons/apple-splash-2048-1536.jpg" rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link href="https://my.app/images/icons/apple-splash-1668-2224.jpg" rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link href="https://my.app/images/icons/apple-splash-2224-1668.jpg" rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link href="https://my.app/images/icons/apple-splash-1620-2160.jpg" rel="apple-touch-startup-image" media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link href="https://my.app/images/icons/apple-splash-2160-1620.jpg" rel="apple-touch-startup-image" media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link href="https://my.app/images/icons/apple-splash-1284-2778.jpg" rel="apple-touch-startup-image" media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link href="https://my.app/images/icons/apple-splash-2778-1284.jpg" rel="apple-touch-startup-image" media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link href="https://my.app/images/icons/apple-splash-1170-2532.jpg" rel="apple-touch-startup-image" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link href="https://my.app/images/icons/apple-splash-2532-1170.jpg" rel="apple-touch-startup-image" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link href="https://my.app/images/icons/apple-splash-1125-2436.jpg" rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link href="https://my.app/images/icons/apple-splash-2436-1125.jpg" rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link href="https://my.app/images/icons/apple-splash-1242-2688.jpg" rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link href="https://my.app/images/icons/apple-splash-2688-1242.jpg" rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link href="https://my.app/images/icons/apple-splash-828-1792.jpg" rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link href="https://my.app/images/icons/apple-splash-1792-828.jpg" rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link href="https://my.app/images/icons/apple-splash-1242-2208.jpg" rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link href="https://my.app/images/icons/apple-splash-2208-1242.jpg" rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link href="https://my.app/images/icons/apple-splash-750-1334.jpg" rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link href="https://my.app/images/icons/apple-splash-1334-750.jpg" rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link href="https://my.app/images/icons/apple-splash-640-1136.jpg" rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link href="https://my.app/images/icons/apple-splash-1136-640.jpg" rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
Ein PWA-Asset-Generator vereinfacht die Erstellung von Assets für Progressive Web Apps, wie z. B. PWA-Icons und Splash Screens für PWA für Android und iOS.
miTT PWA Asset Generator ist ein kostenloses Tool zur Erstellung von Icons und Splash Screens.
Die gestreckten Startbildschirme auf Ihrer PWA für iPads mit iOS 13 oder neuer werden durch einen Fehler in Safari verursacht, der fälschlicherweise Hochformat-Startbildschirme für die Querformatansicht verwendet.
Die Verwendung von maskable Icons für Ihre PWA stellt sicher, dass Ihre App-Symbole korrekt angezeigt und nicht abgeschnitten oder minimiert werden, unabhängig von den Anforderungen an die Symbolform des Geräts oder Betriebssystems. Dies trägt dazu bei, ein konsistentes und professionelles Benutzererlebnis zu schaffen.
Wenn man PWA-Assets mit Tools wie dem PWA Asset Generator erstellt haben und sie in CMS-Plattformen wie WordPress und Joomla integrieren müssen, kann man Plugins wie miTT PWA (WordPress PWA und Joomla PWA) verwenden. Stellen Sie einfach sicher, dass die Icons gemäß den Anweisungen in der miTT PWA-Dokumentation in den entsprechenden Ordner hochladen.
Die Einbindung von visuell beeindruckenden PWA-Assets in Ihre Webanwendung kann eine schwierige Aufgabe sein, aber mit dem miTT PWA Asset Generator ist es ganz einfach.
- die App-Icons in das Manifest einbinden
- die Meta Tags für iOS Icon and splash screen im head hinzufügen
- Prüfung des Manifests, der Icons und Splash Screens für iOS
Manifest Icons
Das Manifest ist eine JSON-Datei, die im Head enthalten ist. Die Icon Implementation könnte wie folgt aussehen.
"icons": [
{
"src": "/images/icons/manifest-icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
"src": "/images/icons/manifest-icon-512.maskable.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "/images/icons/manifest-icon.svg",
"sizes": "any",
"type": "image/svg"
},
]
iOS Icons and Splash Screens
Um das iOS-Icon und das Splash-Screen-Image zu implementieren, sollte man den folgenden Code in den Kopf der Website einfügen. Hier wird nur ein Beispiel für den Splash Screen gezeigt.
<link href="https://my.app/images/icons/apple-icon-180.png" rel="apple-touch-icon" sizes="180x180">
<link href="https://my.app/images/icons/apple-splash-2048-2732.png" rel="apple-touch-startup-image" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link href="https://my.app/images/icons/apple-splash-2732-2048.jpg" rel="apple-touch-startup-image" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link href="https://my.app/images/icons/apple-splash-1668-2388.jpg" rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link href="https://my.app/images/icons/apple-splash-2388-1668.jpg" rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link href="https://my.app/images/icons/apple-splash-1536-2048.jpg" rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link href="https://my.app/images/icons/apple-splash-2048-1536.jpg" rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link href="https://my.app/images/icons/apple-splash-1668-2224.jpg" rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link href="https://my.app/images/icons/apple-splash-2224-1668.jpg" rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link href="https://my.app/images/icons/apple-splash-1620-2160.jpg" rel="apple-touch-startup-image" media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link href="https://my.app/images/icons/apple-splash-2160-1620.jpg" rel="apple-touch-startup-image" media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link href="https://my.app/images/icons/apple-splash-1284-2778.jpg" rel="apple-touch-startup-image" media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link href="https://my.app/images/icons/apple-splash-2778-1284.jpg" rel="apple-touch-startup-image" media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link href="https://my.app/images/icons/apple-splash-1170-2532.jpg" rel="apple-touch-startup-image" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link href="https://my.app/images/icons/apple-splash-2532-1170.jpg" rel="apple-touch-startup-image" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link href="https://my.app/images/icons/apple-splash-1125-2436.jpg" rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link href="https://my.app/images/icons/apple-splash-2436-1125.jpg" rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link href="https://my.app/images/icons/apple-splash-1242-2688.jpg" rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link href="https://my.app/images/icons/apple-splash-2688-1242.jpg" rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link href="https://my.app/images/icons/apple-splash-828-1792.jpg" rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link href="https://my.app/images/icons/apple-splash-1792-828.jpg" rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link href="https://my.app/images/icons/apple-splash-1242-2208.jpg" rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link href="https://my.app/images/icons/apple-splash-2208-1242.jpg" rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link href="https://my.app/images/icons/apple-splash-750-1334.jpg" rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link href="https://my.app/images/icons/apple-splash-1334-750.jpg" rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link href="https://my.app/images/icons/apple-splash-640-1136.jpg" rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link href="https://my.app/images/icons/apple-splash-1136-640.jpg" rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">