In my bookmarks, the Joplin Discourse icon does not use the native clipping masks and consequently looks like this:
(Firefox)
(Safari)
My understanding of why this is is that images linked as <link rel="apple-touch-icon">
are expected to be full bleed, with square corners. Safari and the iOS home screen take care of the rounded corners on their own, and using an image with pre-rounded corners or padding causes the icon to render strangely and/or incorrectly under some circumstances.
I was looking on realfavicongenerator.net, and it seems like the current recommended format for apple-touch-icon
is 180px x 180px, with full bleed and squared corners as above, though one can get carried away and specify a large number of different icon variations.
Anyway, here are an SVG and PNG version of JoplinIcon.svg modified to fit the above requirements:
I recognize that this is a tiny, nitpicky thing, but I enjoy being OCD about stuff like this. It doesn't reflect badly on anyone. I just have my own particular neuroses, lol.
If you want to see the full Real Favicon Generator report on this site, you can view it here:
(Note that it doesn't check for the full bleed, just the image size and <link>
tags and the like.)