Meta's iOS "Add to Home Screen" icon is not good

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:

IMG_C14E1841BEDA-1

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.

I believe that this is the “apple touch icon”:

https://d11a6trkgmumsb.cloudfront.net/optimized/3X/a/c/ac166452701ce353fa6c8865e99879e8cacfb960_2_180x180.png

image

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.

image

(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:

replacement

image

Much better. Feel free to just use my version, or cook your own, if you like!

9 Likes

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…

6 Likes

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 dark mode version inverts the black:

IMG_7930

3 Likes

Hm, I suppose. This, perhaps?

white-3

Simulator Screen Shot - iPhone 14 Pro - 2023-03-28 at 19.43.36

… I dunno. Maybe y’all want to talk to an actual designer or something!

7 Likes

I’ve updated meta’s apple touch icon to the white background with our logo on front. Should look a lot better now :+1:

Thanks for bringing this to our attention.

11 Likes

Did the scale change significantly? It definitely looks a little on the small side, overwhelmed by the sea of white.

3 Likes

The scale did change yes, as having a white background also meant shrinking the icon a bit so the white space enveloped the icon.

It can be tweaked though as it seems feedback has shown it seems smaller than people desire.

2 Likes

what happened to the old logo that was used on mobie devices, and why are we using a different design?

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.

3 Likes

I hear you, but I think we can push it larger, for sure.

At the moment

  • DiscourseHub has a big Discourse logo (enveloped by white)
  • Meta PWA has a smaller Discourse logo (enveloped by white)

Can we just change it so we use the old logo in DiscourseHub which pushed the boundaries a bit more?

1 Like

Here they are side-by-side:

IMG_7955

2 Likes

From a design point of view, I think we should actually shrink the logo in the DiscourseHub app as well.

From seeing these side by side, the icon on the left better positions the logo for balance than the hub version on the right.

4 Likes

This is my Firefox new tab page now. The white background on the icon is very non-standard from the looks of it

3 Likes

Why would Firefox be using the apple touch icon?? I would expect Firefox to use one of the icons linked from https://meta.discourse.org/manifest.webmanifest.

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.

2 Likes

Both Chrome (Android tab icons) and Firefox (Tab start page) use the apple-touch-icon as a High-DPI version of the favicon, and where both affected by this change.

AFAIK that is only used for PWA features, like the icon when you add it to the homescreen.

2 Likes

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:

image

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.

2 Likes

I don’t reproduce that for Chrome Android. For Chrome Android, the new tab icon seems to be just the favicon.

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. :thinking:

More broadly, I think the moral of this story is:

  1. This is actually kind of a project, figuring out what icons are being used where and why
  2. 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:

  • iOS A2HS
  • Android A2HS
  • Tab start pages for Firefox, Chrome, and Safari
2 Likes