This site uses cookies. By continuing to browse the site, you agree to our use of cookies. Find out more about cookies.
Skip to main content
Metadecidim's official logo
  • English Triar la llengua Elegir el idioma Choose language
    • Català
    • Castellano
Sign Up Sign In
  • Home
  • Processes
  • Assemblies
  • Initiatives
  • Consultations
  • Conferences
  • Help

Propose new functionalities for Decidim software

#DecidimRoadmap Designing Decidim together

Phase 1 of 1
Open 2019-01-01 - 2030-12-31
Process phases Submit a proposal
  • The process
  • Debates
  • Propose new features
  • News
chevron-left Back to list

Custom icons in my Home Screen

Avatar: InnovacióDemocràtica InnovacióDemocràtica verified-badge
16/09/2021 11:53  
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


  • Filter results for category: PX (Participant eXperience) / Usability PX (Participant eXperience) / Usability

The development of this proposal has finished

  • 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

Endorsements count0
Custom icons in my Home Screen Comments 0

Reference: MDC-PROP-2021-09-16746
Version number 3 (of 3) see other versions
Check fingerprint

Fingerprint

The piece of text below is a shortened, hashed representation of this content. It's useful to ensure the content hasn't been tampered with, as a single modification would result in a totally different value.

Value: b54bd9f0ceda36868e4f10fdaa7cf75ff51e914598327745f9ae7671523798a6

Source: {"body":{"en":"<p>Ref. PWA09</p><p>NOTE: this feature is from a big development. See <a href=\"https://github.com/decidim/decidim/discussions/8334\" target=\"_blank\">PWA discussion at GitHub</a>.</p><p><strong><img src=\"https://i.imgur.com/Mceeg62.png\"></strong></p><p><strong>Is your feature request related to a problem? Please describe.<br></strong> 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.</p><p><strong>Describe the solution you’d like<br></strong> I want to have the apple-touch-icon meta tag. It should have 180x180 pixels.</p><p>As we already have a Favicon field in Organization -&gt; Appearance, we’re going to reuse that.</p><p>We will also implement some of the recommended sizes in <a href=\"https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs\" target=\"_blank\">the EvilMartians’ Favicon guide</a>. Mind that for simplicity we’ve dropped the SVG format. Sizes will be 32x32, 180x180, 192x192 and 512x512.</p><p>The help text of this field will be:</p><p>Guidance for file:</p><ul><li>Has to be a square image.</li><li>The recommended size for this image is 512x512.</li><li>Accepted formats: png</li><li>This image will be: Resized and padded to 192x192, 180x180, and 32x32.</li></ul><p>As this is potentially a breaking change for legacy apps this change should be explained in the CHANGELOG:</p><p>As of PR XXX, we now only allow PNG images at Favicon so we can provide higher quality versions to mobile devices.</p><p><strong>Describe alternatives you’ve considered<br></strong> We could have lots of uploads fields for different kinds of favicons, but that’s overkill.</p><p>We could transform it to SVG also as the <a href=\"https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs\" target=\"_blank\">linked article mentions</a>, but that’s too much.</p><p><strong>Additional context</strong></p><p><a href=\"https://web.dev/apple-touch-icon/\" target=\"_blank\">https://web.dev/apple-touch-icon/</a></p><p><strong>Does this issue could impact on users private data?<br></strong> No, it’s about icons</p><p><strong>Acceptance criteria</strong></p><ul><li>Given that I’m an administrator<strong><br></strong> When I go to the Organization -&gt; Appearance admin page<strong><br></strong> Then I see the following help in the Favicon section:</li></ul><p>Guidance for file:</p><ul><li>Accepted format: png</li><li>The recommended shape for this image is a square.</li><li>The recommended size for this image is 512x512.</li><li>This image will be: Resized and padded to 192x192, 180x180, and 32x32.</li><li>Given that I’m a visitor and an administrator uploaded a 512x512 PNG image in this field<strong><br></strong> When I check the source code<strong><br></strong> Then I can see that there’s this meta tag: &lt;link rel=\"icon\" href=\"/favicon.ico\" sizes=\"any\"&gt;<strong><br></strong> and that the original image was resized to 32×32.</li><li>Given that I’m a visitor and an administrator uploaded a 512x512 PNG image in this field<strong><br></strong> When I check the source code<strong><br></strong> Then I can see that there’s this meta tag: &lt;link rel=\"apple-touch-icon\" href=\"/apple-touch-icon.png\"&gt;<strong><br></strong> and that the original image was resized to 180x180.</li><li>Given that I’m a visitor and an administrator uploaded a 512x512 PNG image in this field<strong><br></strong> When I check the manifest file<strong><br></strong> Then I can see that there’s an icon key with the 192x192 and 512x512 properties<strong><br></strong> And that these icons were resized to their corresponding sizes.</li><li>Given that I’m an implementer<strong><br></strong> When I go to <a href=\"http://CHANGELOG.md\" target=\"_blank\">CHANGELOG.md</a><strong><br></strong> 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”</li><li>Given that I’m an implementer<strong><br></strong> When I generate a new application<strong><br></strong> and I go to /system<strong><br></strong> Then I see that there isn’t the ICO extension anymore</li></ul><p><br></p>"},"title":{"en":"Custom icons in my Home Screen"}}

This fingerprint is calculated using a SHA256 hashing algorithm. In order to replicate it yourself, you can use an MD5 calculator online and copy-paste the source data.

Share:

link-intact Share link

Share link:

Please paste this code in your page:

<script src="https://meta.decidim.org/processes/roadmap/f/122/proposals/16746/embed.js"></script>
<noscript><iframe src="https://meta.decidim.org/processes/roadmap/f/122/proposals/16746/embed.html" frameborder="0" scrolling="vertical"></iframe></noscript>

Report inappropriate content

Is this content inappropriate?

Reason

0 comments

Order by:
  • Older
    • Best rated
    • Recent
    • Older
    • Most discussed

Add your comment

Sign in with your account or sign up to add your comment.

Loading comments ...

  • Terms and conditions of use
  • About the community
  • Download Open Data files
  • Metadecidim at Twitter Twitter
  • Metadecidim at Instagram Instagram
  • Metadecidim at YouTube YouTube
  • Metadecidim at GitHub GitHub
Creative Commons License Website made with free software.
Decidim Logo

Confirm

OK Cancel

Please sign in

decidim Sign in with Decidim Barcelona
Or

Sign up

Forgot your password?