Explore creating and using app icons in a Progressive Web App (PWA). Read about a PWA gotcha with Safari on iOS. Use Chrome Dev tools to simplify validation and debugging.
How to Create and Use App Icons in a PWA
Better user experience with Progressive Web Apps
App icons are crucial for branding. It is the first thing a user interacts with, even before launching your app. On mobile devices, icons are placed on the home screen. A quality graphic for the icon adds to users’ intuition to tap open the application.
It’s natural for mobile app developers to build and include the icon while packaging the app. With the advent of PWA (Progressive Web Apps), the icons are configurable in a web manifest file.
Progressive Web Apps allow web applications to be installed on a device. You can create a shortcut on the mobile home screen. Tap open the icon to launch the application in its own window. You may hide browser controls and provide the experience of an app.
Create an App Icon
For the app icon, the web manifest allows configuring icons of various sizes. In this example, you will see eight different image dimensions catering to various device form factors and usage. You may create a single graphic and use a tool to generate the images. Following are a couple of examples of the tools to generate icons in all the needed dimensions for a PWA.
- PWA Builder — https://www.pwabuilder.com/imageGenerator
- PWA App Icon generator — https://tools.crawlink.com/tools/pwa-icon-generator/
Next, provide a relative path to the icon in the web manifest. Consider the following code sample,
{
"name": "Sample",
"theme_color": "#1976d2",
"background_color": "#fafafa",
"display": "standalone",
"scope": "./",
"start_url": "./",
"icons": [{
"src": "assets/icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png",
"purpose": "any"
},
{
"src": "assets/icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png",
"purpose": "any"
},
{
"src": "assets/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png",
"purpose": "any"
},
{
"src": "assets/icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png",
"purpose": "any"
},
{
"src": "assets/icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png",
"purpose": "any"
},
{
"src": "assets/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
},
{
"src": "assets/icons/icon-384x384.png",
"sizes": "384x384",
"type": "image/png",
"purpose": "any"
},
{
"src": "assets/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
}
]
}Validate with Chrome Dev Tools
The Chrome Dev Tools are powerful for debugging. Navigate to the Application tab in the dev tools. Select Manifest to see the details about the web manifest.
Among other things, the tool validates app icon images and shows warnings and errors. Consider the following example. It shows a warning that the image did not match the specified dimensions. The image with the configured size 384x384 turns out to be referencing an image with an incorrect dimension. See the code snippet and the error below.
{
"src": "assets/icons/icon-384x384.png",
"sizes": "384x384",
"type": "image/png",
"purpose": "any"
},
Read more about the manifest file and Chrome Dev Tools here — link
Gotcha with Safari on iOS
Safari on iOS doesn’t yet support showing an icon configured in the manifest. It generates a preview of the page and uses it on the bookmark.
Following is an active bug with WebKit — link.
However, you may use link elements in Index.html to show your icon graphic an app icon. The link elements are typically used for providing a link to an external or an internal resource. In this case it links to an app icon. Notice, the icons use a rel value (relationship) apple-touch-icon, indicating app icon on home screen.
<head>
<meta charset="utf-8">
<title>Sample</title> <link rel="apple-touch-icon" sizes="120x120" href="assets/icons/icon-144x144.png" /> <link rel="apple-touch-icon" sizes="152x152" href="assets/icons/icon-152x152.png" /></head>
References
- MDN Web Docs on Manifest- https://developer.mozilla.org/en-US/docs/Web/Manifest
- Blog- Visualise Application Manifest — https://medium.com/nerd-for-tech/visualize-application-manifest-ebd771b325d8
Tools to generate App Icons
- PWA Builder — https://www.pwabuilder.com/imageGenerator
- PWA App Icon generator — https://tools.crawlink.com/tools/pwa-icon-generator/
- An active bug with WebKit for the App Icon — https://bugs.webkit.org/show_bug.cgi?id=183937.
More content at plainenglish.io. Sign up for our free weekly newsletter here.
