Created attachment 465961 [details] Screenshot of Narrow One installed to the home screen on iOS. Steps to reproduce: 1. Go to https://narrow.one/ 2. Add the page to the home screen. Please see the attached screenshot. The black border is not supposed to be there. None of the images in the web app manifest contain a black border. The manifest for narrow.one can be found at https://narrow.one/static/manifest.json It has 6 icons: - 2048x2048 webp - 2048x2048 jpeg - 1024x1024 png and three more that are similar but maskable. I think this regressed in iOS 16.4 because I'm pretty sure it was working a few months ago.
Hmm I'm guessing the black border is caused by the png being transparent. I'm not sure why it picks the png only now, and not in previous versions. I suppose this can be considered a feature request for maskable app icons. It's a difficult situation. If I remove the transparency, the icon will not get rounded corners on some android devices, but if I keep it, it gets black borders on iOS.
<link rel="apple-touch-icon" href="solid-color-icon.png"> Use this meta tag for iOS. I think in previous iOS the border was white in light mode and black in dark mode. Now it looks like it is always black.
Thanks, the meta tag seems to work. We already had a jpeg icon without transparency, I think previous versions used to pick up this icon instead of the pngs with transparency. I think it would be best if iOS preferred 'maskable' icons when available, with the appropriate cropping, since the behaviour iOS is showing is exactly what the maskable purpose was made for.
<rdar://problem/108501444>