Custom icons in my Home Screen

Ref. PWA09

NOTE: this feature is from a big development. See PWA discussion at GitHub.

Is your feature request related to a problem? Please describe.
As a visitor with an iPhone after I’ve added it to my iOS home screen, I want to see this icon with a nice resolution.

Describe the solution you’d like
I want to have the apple-touch-icon meta tag. It should have 180x180 pixels.

As we already have a Favicon field in Organization -> Appearance, we’re going to reuse that.

We will also implement some of the recommended sizes in the EvilMartians’ Favicon guide. Mind that for simplicity we’ve dropped the SVG format. Sizes will be 32x32, 180x180, 192x192 and 512x512.

The help text of this field will be:

Guidance for file:

• Has to be a square image.
• The recommended size for this image is 512x512.
• Accepted formats: png
• This image will be: Resized and padded to 192x192, 180x180, and 32x32.

As this is potentially a breaking change for legacy apps this change should be explained in the CHANGELOG:

As of PR XXX, we now only allow PNG images at Favicon so we can provide higher quality versions to mobile devices.

Describe alternatives you’ve considered
We could have lots of uploads fields for different kinds of favicons, but that’s overkill.

We could transform it to SVG also as the linked article mentions, but that’s too much.

Additional context

https://web.dev/apple-touch-icon/

Does this issue could impact on users private data?
No, it’s about icons

Acceptance criteria

• Given that I’m an administrator
  When I go to the Organization -> Appearance admin page
  Then I see the following help in the Favicon section:

Guidance for file:

• Accepted format: png
• The recommended shape for this image is a square.
• The recommended size for this image is 512x512.
• This image will be: Resized and padded to 192x192, 180x180, and 32x32.
• Given that I’m a visitor and an administrator uploaded a 512x512 PNG image in this field
  When I check the source code
  Then I can see that there’s this meta tag: <link rel="icon" href="/favicon.ico" sizes="any">
  and that the original image was resized to 32×32.
• Given that I’m a visitor and an administrator uploaded a 512x512 PNG image in this field
  When I check the source code
  Then I can see that there’s this meta tag: <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  and that the original image was resized to 180x180.
• Given that I’m a visitor and an administrator uploaded a 512x512 PNG image in this field
  When I check the manifest file
  Then I can see that there’s an icon key with the 192x192 and 512x512 properties
  And that these icons were resized to their corresponding sizes.
• Given that I’m an implementer
  When I go to CHANGELOG.md
  Then I see a message that says that “we now only allow PNG images at Favicon so we can provide higher quality versions to mobile devices”
• Given that I’m an implementer
  When I generate a new application
  and I go to /system
  Then I see that there isn’t the ICO extension anymore