I just noticed that this forum’s Android PWA icon is kinda busted, too.
I just fired up Android Studio and launched a Pixel 4 emulator running Android API 31, installed the latest version of Google Chrome, and installed Meta to the home screen. The icon looks like this:
As I read it, the problem is that in the https://meta.discourse.org/manifest.webmanifest, there’s a space offering two icons, one for purpose “any,” and another with purpose “maskable.” The “maskable” icon asserts that it’s OK to cut a 40% radius circle out of it.
Luckily, there’s a well-defined and standardized “minimum safe zone” that all platforms respect. The important parts of your icon, such as your logo, should be within a circular area in the center of the icon with a radius equal to 40% of the icon width. The outer 10% edge may be cropped.
You can check which parts of your icons land within the safe zone with Chrome DevTools. With your Progressive Web App open, launch DevTools and navigate to the Application panel. In the Icons section, you can choose to Show only the minimum safe area for maskable icons. Your icons will be trimmed so that only the safe area is visible. If your logo is visible within this safe area, you’re good to go.
Here’s how Meta’s Manifest panel looks in Chrome Dev Tools when I check “Show only the minimum safe area for maskable icons”
Since the icon is supposed to be maskable, Android/Chrome is taking a circular chunk out of the middle, with poor results.
I tested using the Apple Touch Icon, which @Stephen described as “overwhelmed by a sea of white,” as a maskable manifest icon in Chrome Dev Tools. But even that icon is just barely too large against the standard maskable size… the lower-left corner gets chopped off.
