PWA Asset Generator
PWA App Icons and iOS Splash Screens
for your Progressive Web App
miTT PWA Asset Generator is a free tool to generate your App Icons for your Progressive Web App (PWA) and ios Splash Screens. It helps you for the Wordpress PWA Plugin miTT PWA, Joomla Plugin or any other Web App.
Generate PWA Assets
for WordPress
for Joomla
for your own website
- supported formats: png, jpg, webp
- recommended size: 512x512px
- aspect ratio: 1:1
After filling in the fields and uploading the image,
a zip folder with the generated icons and splash screens
for PWA is created and will be downloaded by the browser.
Create Custom App Icons and splash screens for Your PWA
When crafting a standout Progressive Web App, efficiency in generating consistent assets is vital. PWA asset generators, such as the free tool miTT PWA Asset generator, are crucial tools that produce icons and splash screens quickly and uniformly across various platforms.
Key Takeaways
- miTT PWA Asset Generator simplifies the creation of icons and splash screens for Progressive Web Apps by allowing developers to generate assets that meet Web App Manifest specifications and look native across all devices.
- PWA assets such as icons, splash screens, and maskable icons are fundamental to enhancing the user experience, with generators considering platform-specific requirements and the ability to create custom assets for different orientations and display modes.
- The images are read dot upload to miTT PWA for WordPress and miTT PWA for Joomla
miTT PWA Asset Generator for the key components such as PWA Icons, Splash screen images, maskable icons
The key to a visually appealing PWA lies in the details. The core enables attention to the PWA icons and splash screens, which are more than just pretty pictures. These generated image assets adhere to web app manifest specs, ensuring your PWA looks impeccable on any device. Some crucial assets to consider are:
- PWA icons represent your PWA on the user's home screen and app drawer. They should be visually appealing and easily recognizable.
- Splash screens: These screens appear when the user launches your PWA, providing a smooth transition from the launch screen to the app interface.
- Maskable icons: These icons are designed to fit perfectly into the diverse icon shapes dictated by different device platforms, providing a level of customization that elevates the user experience.
Attention to these details and using the proper assets can create a visually appealing PWA that enhances the user experience.
Splash screens are the first impression your app makes on a user. PWA Asset Tools consider the static spec data and generate splash screens tailored to the unique requirements of multiple platforms, such as Android's and iOS's specific meta tags and manifest file considerations. iOS needs the Splash screen as images; Android does it with the Manifest setting and the manifest icon.
Icons and Splash Screens PWA for WordPress and PWA for Joomla
The miTT PWA asset generator is built to generate splash screens and icons for plugins miTT PWA. This helps website admins quickly set up the PWA of CMS such as WordPress and Joomla. After generating splash screens and icons, they could be uploaded to the folder.
miTT PWA goes beyond aesthetics, supporting the service worker lifecycle to manage static file caching and ensure your PWA is always up-to-date with the latest content. The manifest settings within miTT PWA are particularly noteworthy, as they enable your PWA to start on the last visited page, mimicking the behavior of a native app and enhancing the user experience.
Frequently Asked Questions (FAQ) PWA Asset GeneratorPWA Asset Generators simplify the creation of assets for Progressive Web Apps, such as PWA Icons and Splash Screens for PWA for Android and iOS.
miTT PWA asset generator is a free tool to generate icons and Splash screens.
The stretched splash screens on your PWA for iPads running iOS 13 or newer are caused by a bug in Safari, which mistakenly uses portrait splash screens for landscape view.
Using maskable icons for your PWA ensures that your app icons are displayed correctly and are not cropped or minimized, regardless of the device or operating system's icon shape requirements. This helps provide a consistent and professional user experience.
If you have generated PWA Assets using tools such as PWA Asset Generator and need to integrate them into CMS platforms like WordPress and Joomla, then you can use plugins like miTT PWA. Just make sure to upload the icons to the designated folder per the instructions in the miTT PWA documentation.
Navigating the incorporation of visually striking PWA assets into your web application can be a daunting task, but with the miTT PWA Asset Generator, it becomes a breeze.
- Include the images to the manifest specification
- add the meta tags to the head with all the platforms
- Please ensure that the manifest loads correctly and that the iOS splash screen images can be loaded.
Manifest icons
The manifest is a JSON file, which is included in the head. The icon part could look as follows.
"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
To implement the the iOS icon and the splash screen image, then you have to add following code to the head of the website. Here is only one example of the Splash Screen demonstrated.
<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)">
PWA Asset Generators simplify the creation of assets for Progressive Web Apps, such as PWA Icons and Splash Screens for PWA for Android and iOS.
miTT PWA asset generator is a free tool to generate icons and Splash screens.
The stretched splash screens on your PWA for iPads running iOS 13 or newer are caused by a bug in Safari, which mistakenly uses portrait splash screens for landscape view.
Using maskable icons for your PWA ensures that your app icons are displayed correctly and are not cropped or minimized, regardless of the device or operating system's icon shape requirements. This helps provide a consistent and professional user experience.
If you have generated PWA Assets using tools such as PWA Asset Generator and need to integrate them into CMS platforms like WordPress and Joomla, then you can use plugins like miTT PWA. Just make sure to upload the icons to the designated folder per the instructions in the miTT PWA documentation.
Navigating the incorporation of visually striking PWA assets into your web application can be a daunting task, but with the miTT PWA Asset Generator, it becomes a breeze.
- Include the images to the manifest specification
- add the meta tags to the head with all the platforms
- Please ensure that the manifest loads correctly and that the iOS splash screen images can be loaded.
Manifest icons
The manifest is a JSON file, which is included in the head. The icon part could look as follows.
"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
To implement the the iOS icon and the splash screen image, then you have to add following code to the head of the website. Here is only one example of the Splash Screen demonstrated.
<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)">miTT Documentation miTT PWA for WP
Documentaion for the miTT PWA for Wordpress with Push Notifications