Now that iOS 16.4 is out, I’ve used “Add to Home Screen” (A2HS) to add a number of Discourse forums to my iPhone home screen, including this forum, Meta.
When I add Meta to my home screen on iOS, it looks like this:
If you look closely, you’ll see that this is actually a transparent image with a nearly black border, surrounded by a black background. Once you see it, you can’t unsee it.
Apple automatically adds a black background to this icon, creating two different colors of black on the icon.
Worse, when you tap on the icon and then return to the home screen, iOS briefly shows the transparent icon, and then draws in the black background a second later.
(It’s too bad Apple doesn’t just leave it transparent! This icon looks pretty good… for a second.)
I think the best thing to do is to replace Meta’s “apple touch icon” with an icon with no transparency. I used Photoshop’s eyedropper tool to fill in the square with a matching, nearly black background, like this:
Much better. Feel free to just use my version, or cook your own, if you like!
I furthermore suggest that Discourse should display the “apple touch icon” in Settings with a black background, to make it more obvious to site administrators what will happen if they try to use a transparent icon as the “apple touch icon.”
EDIT: It would be even better if the admin Settings would display “apple touch icon” with rounded corners and a black background, so site administrators could see that the image will have an Apple-provided border radius. Another forum I’m on had an “apple touch icon” with a colored border, and of course it looked terrible when Apple added rounded corners…
That region around the color is part of the logo though. I’m not sure black on black looks right at all. The dark gray on black looks better than the alternative. That region forms the D of Discourse, without it all we see are overlapping speech bubbles.
The logo was changed because the transparent png that was used previously would, when pinned to the Home Screen, have the transparency replaced with black which actually obscured part of the logo.
It was replaced with an icon that uses an explicit white background so the logo renders correctly when pinned to the Home Screen.
Indeed, I thought that was why Discourse has two separate settings, “manifest icon” and “apple touch icon,” because Apple ignores transparency and applies rounded-corners masking, whereas other browsers are supposed to follow the Web Manifest standard, allowing transparency.
Both Chrome (Android tab icons) and Firefox (Tab start page) use the apple-touch-icon as a High-DPI version of the favicon, and were both affected by this change.
AFAIK that is only used for PWA features, like the icon when you add it to the homescreen.
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.
Are you able to find any documentation on what icon Firefox uses for the Tab start page?
If Firefox isn’t using the Manifest icon for the Tab start page, then I would have expected it to use one of the <link rel=icon> icons, at least.
Perhaps Firefox is falling back to the apple touch icon because the <link rel=icon> is so small?
You know, you’re allowed to have multiple <link rel=icon> elements, with multiple sizes attributes. I think it would probably make sense to have two <link rel=icon> elements, the first one pointing to the favicon, and the second pointing to the manifest icon with a larger sizes. I bet that would make Firefox use the better, larger icon.
More broadly, I think the moral of this story is:
This is actually kind of a project, figuring out what icons are being used where and why
The Discourse admin site isn’t giving admins anywhere near enough guidance to get this right
The admin site should:
Ban transparency in manifest icons and apple touch icons
Render the manifest icon with a 40% radius circle, like Chrome Dev Tools does
Render the apple touch icon with rounded borders, the way Apple does
With those facilities in place, I think a designer could begin to attempt to tackle the problem of uploading icons that look good in all of:
