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

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