Most of the time, besides UI design, most designers will be tasked to design the launcher icon to go with the app, and I think there is no better way to preview the design than having them shown at the real device home screen (at least for me).

Which is why I have been working with my friend, Henry Lim (a talented web tech GDE) to create a simple web app – iconpreview.com, which works for both iOS and Android (only Android 7.1 and below, adaptive icon not supported).

It’s really simple – just navigate to iconpreview.com, select your launcher icon design with appropriate format and size (PNG, 192px×192px), give it a name, upload, and it will generate a link and QR code for your uploaded icon. Browse to the page with Safari/Chrome, then ‘Add to Home Screen’. Voila!

Quick words on how it works

iOS

For iOS, it’s rather simple. It is simply a web shortcut, so it works just like the usual web shortcut in iOS. So you just need to upload a complete square icon (just like how you provide them to Apple), and the masking will be done by the system.

Android

Android is a little bit tricky. Initially, it was meant to be a web shortcut as well, but if we simply add it to the home screen via Chrome, there will be a chrome shortcut icon added to the bottom right corner, which is obviously less than ideal for icon design preview.

We then look for other ways that can fix this issue, and Henry came up with a brilliant thought of having it added as a simple Progressive Web App (PWA), and through this way, the icon design can be previewed nicely at the home screen. The only caveat is that each time you add the new icon to the home screen, it is treated as an app so to remove it, you will need to uninstall it, as opposed to remove the shortcut from the home screen. We are satisfied with the solution though 🙂

Note on Adaptive Icon: The icon preview, unfortunately, doesn’t work on Android 8.0+ that uses adaptive icon because PWA doesn’t use the Adaptive Icon system (at least from what I tried, if you know how to do it better, let us know!), so the icon will just be placed in the center of a white icon base. If you want to preview how the adaptive app icon will feel at the home screen, you need to have a device running 7.1 or below, then upload the icon with the mask already applied.

It’s currently in Beta as we aren’t sure if there will be any more issue, but feel free to share it out! iconpreview.com