favicon-touch image corners

[elsiehupp]

The default favicon-touch renders incorrectly in Firefox:

(shown on Mac, but also applicable on Linux and iOS)

This is because the apple-touch-icon specification (to the extent that it exists) expects the image referenced in <link rel='apple-touch-icon' href='favicon-touch.png'> to have squared corners. An icon with rounded corners is only expected by <link rel='apple-touch-icon-precomposed' href='favicon-touch.png'>. When a favicon is referenced without the -precomposed, Apple devices will go ahead and apply the rounded-corner mask to an image with square corners.

Note that the DigitalOcean and NYTimes apple-touch-icon images flanking the Nextcloud icon in the above screenshot both have square corners:

And, yes, they look fine in Safari (aside from the text wrapping):

The current recommendation seems to be that icons referenced as apple-touch-icon have a resolution of 180px x 180px (the size of the DigitalOcean icon), though previously it was 144px x 144px (the size of the NYTimes icon). Firefox and Chrome on desktop seem to render icons at 192px x 192px, so it might actually be safer to default to that. Or something. The <link rel ...> tag can actually specify a large set of variations for a wide variety of circumstances.

There are plenty of other mindnumbing subtleties to getting a favicon to render correctly in every possible circumstance, and I am getting my information from realfavicongenerator.net. Nextcloud could plausibly integrate the Real Favicon Generator API in order to cover all its bases, but that's kind of above my pay grade at the moment, lol.

The changes I've made here are the bare minimum that should (hopefully) make the default Nextcloud favicon render correctly in Firefox (i.e. with the correct corner radius).

Oh, and I apparently neglected to sign my git commits, so... uh... let me know if and how I should fix that. Thanks! The "Details" link explained to me.

[elsiehupp]

One thing I should clarify is that I don't know what manifest.json does, and I did not go through the effort of building and testing the cloned repository, so my change to manifest.json is just an educated guess.

[rullzer]

Thanks. @jancborchardt and co please have a look.

[marcoambrosini]

Thanks for that @elsiehupp :)

[elsiehupp]

FWIW it might be possible and/or better to have favicon-touch be 192px x 192px (for Firefox, Chrome, and Android), but I haven't been able to test anything because, again, I'm running nextcloud-snap. Here's a tentative 192px x 192px PNG if you'd like to test it:

Getting hi-res favicons working in every possible scenario is kind of a rabbit hole, not to mention getting hi-res favicons auto-generated from a single image, like Nextcloud is apparently able to do with custom logos...

[jancborchardt]

Perfect, thanks a lot @elsiehupp! :)

[welcome]

Thanks for your first pull request and welcome to the community! Feel free to keep them coming! If you are looking for issues to tackle then have a look at this selection: https://github.com/nextcloud/server/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22

[jancborchardt]

/backport to stable21

[jancborchardt]

By the way @elsiehupp we are always looking for more design contributors! :) If you are interested, maybe some of the design bugs are interesting to check out? https://github.com/nextcloud/server/issues?q=is%3Aopen+is%3Aissue+label%3Adesign+label%3Abug