Historically, iOS has never supported app icons with transparent backgrounds. Whether on your iPhone or iPad, a solid background envelopes all app icons, PWAs included. See this example from an iPhone 13 Pro Max below:

On Android, until not that long ago, developers were allowed to use app icons with a transparent background. Below is the home screen of a Samsung Galaxy Note 4 from 2014. This variety of shapes looked a little messy, didn't it?

However, in most recent Android versions, app icons have been standardized. Every app icon has the same size and shape on a given home screen. Below are examples of app icons on a Samsung Galaxy Note S21+ (square icons) and a Google Pixel 6 (circular icons).

Now, Android comes in a bunch of variations, themes, and vendors. Some have circular icons, some have square icons, and some have square icons with very rounded corners.

So that you don't need to upload an icon for every single variation (just imagine the nightmare...), browser vendors have introduced maskable icons. A maskable icon is an image file that comes with a solid background and a safe area. That image will be cropped to fit into the designated app icon box of each specific device.

In one word: consistency! If you've been using Progressier or our iOS splash screen generator tool, you might have noticed that a solid background is required. This is done this way so that your app icons look consistent across all devices.

If we didn't add a background for you, platforms requiring maskable icons would add one regardless. Most of the time, it would be white. Sometimes it would be black or some other darker background.

With Progressier, you have full control over how your final app icon looks.