Skip to main content

Cookie settings

We use cookies to ensure the basic functionalities of the website and to enhance your online experience. You can choose for each category to opt-in/out whenever you want.

Essential

Preferences

Analytics and statistics

Marketing

This proposal has been implemented

  • Reviewed by @product and accepted in the main project
  • It is funded by Barcelona City Council
  • Developed by Populate
  • Available in release 0.27 via #8645

Custom icons in my Home Screen

Avatar: InnovacióDemocràtica InnovacióDemocràtica Finished

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


Comment

Confirm

Please log in

The password is too short.

Share