Logo is being cropped by Android on Home Screen

What exactly do you mean with updating the module ? Did you update from 2.0.0-rc1 to 2.0.0-rc2? Or are you using the dev version?

Manually reverting https://git.drupalcode.org/project/pwa/-/commit/a84b5bc8a7f447c44d8eb636... doesn't change the manifest.json 'icons' section, so it probably isn't dev you are using.
IF you are using dev, (which isn't generally recommended), have you cleared all the caches and run 'drush updb' after upgrading?

And if you simply updated the module regularly via composer, what are the exact versions you upgraded from / to?

Do the test with a blank inteallation, the website logo overflows from the application logo. Look at my screenshot

Could you provide the exact version you updated? And once again, are you using the dev release?

A lot of image issues were solved in 🐛 Defined App Image Icon isn't used Fixed , so you could try to use the current 2.x-dev release.

Actually wait a bit for the alpha release.

I'm on version 2.x-dev and I have another website on version 2.0.0-rc2

For these two websites I have the same problem. I cleared the cache and that doesn't fix it.

@zenimagine thanks, please try to re-upload the icon in the 2.x-dev project. Does that fix the issue?

rc2 doesn't have the required fixes, so re-uploading won't fix it. Would you be willing to upload the original logo file here, so we can test and compare it easily?

I followed your instructions and it doesn't work, the logo overflows

Thanks! We just finished a couple of issues anyway and updated dev once again a few moments ago! Have you updated your database using "drush updb"?

Anyway, most of the major issues should be fixed now and I am going to do some testing on dev for the upcoming release, so I'll have a look, with your provided icon!

yes I did the update just before sending my message, as well as the database and I cleared the cache, but that does not correct

Thanks for the update!

@Grevil perhaps the module uses crop instead of scale for the smaller versions?

BTW it's not totally clear, that this is a module bug. Might also be the way the OS (Android?) resizes / crops the images!

Ok, the problem is, that this module currently doesn't support adding "maskable icons" (see https://web.dev/learn/pwa/web-app-manifest/#maskable-icons for further information).

I'll adjust the issue summary, and see if we can get this feature sponsored, as seemingly a lot of newer devices use it.

I have alerts regarding your last comment in Chrome

Thanks @Grevil,

that reads to me like it's a boolean setting (adding that "purpose": "maskable" flag) and documentation for the user to understand what that option means?

But from the text, I'd understand that without this option, it should already work with the provided logo?

Also see #18 I'm not sure about that yet.

So for me it would also be a valid option here to just add some documentation about this below the upload field and make it the users job to add enough padding to the logo. To me it seems that that's Android's expectation? (And that option will just make it explicit)

The quality of the images seems to be worse now, because of the rescaling. I guess the original logo was taken from the GDrive Link provided in https://www.drupal.org/about/media-kit/logos → , rescaled using the .svg file and then exported as a PNG.

@Grevil you're right, didn't see that. So let's ask @thomas.frobieter to add the padding with the svg source files. Still the documentation addition below the field is the more important task.

@zenimagine regarding your comment, you can read on https://dev.to/progressier/why-a-pwa-app-icon-shouldnt-have-a-purpose-se... why it is a bad idea to have both "any" and "maskable" on the same icon. @Anybody, because of the information provided in this article and the following quote from another:

[...]Using "maskable" icons as "any" icons is suboptimal as the icon is going to be used as-is, resulting in excess padding, making the core icon content smaller. Ideally, icons for the "any" purpose should have transparent regions and no extra padding [...]

https://web.dev/maskable-icon/

I still think, the best approach is to provide a separate upload field for the maskable icon.

Happy to see community contribution here. We don't need it and unless someone sponsors it, we won't invest further time (and money) here.
But we should add a comment to the existing upload field.

@zenimagine, but for now, your best bet is to simply readjust your logo, to add more padding and verify your icon on https://maskable.app/, to see if it fits. You don't have to manually add a purpose, "any" is the current default.

Although, doing so will make the logo look too small on your splash screen and windows. But this needs to be solved inside this issue, once we have the time.

Ok last thing to-do here, is that @thomas.frobieter adds 20% padding to the Druplicon.svg and resizes it to 512x512, 192x192 and 144x144, leaving the background transparent.

Doing this through https://maskable.app/editor will add a mandatory background, which we do not want, as it is specific to maskable icons, and our icon will be used everywhere (purpose: any), which isn't optimal, but as discussed we do not want to implement the proper working functionality ourselves, because of time issues.

Ok last thing to-do here, is that @thomas.frobieter adds 20% padding to the Druplicon.svg and resizes it to 512x512, 192x192 and 144x144, leaving the background transparent.

SVGs are 'Scalable Vector Graphics', why PWA requires different sizes of a vector graphic? This doesn't make any sense at all.

@thomas.frobieter updated my comment, I forgot to add the "export as png" part.

Attached! →

All done! Thanks, @thomas.frobieter!

Create a follow-up issue for the explicit support of maskable icons here: ✨ Support the addition of maskable icons Active .

Thank you for your comments, I redid my logo on this website :

https://maskable.app/editor

It's not simple and intuitive, but it improves the framing a little. However, the box on the home screen is square. Too bad because it was better in the round.

This is weird, because a few months ago, the PWA didn't have these problems.

Rereview pls!

Automatically closed - issue fixed for 2 weeks with no activity.