Homepage    |    GitHub    |    API    |    Wiki    |    FAQ

Discourse apple-touch-icon is formatted incorrectly

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:

apple-touch-icon apple-touch-icon

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.)