apple-touch-icon for MacOS chrome web apps
I'm creating a Web APP that will work on both iOS and OS X (MacOS), but I'm having difficulties with the icons.
Following Apple's own manuals I created an apple-touch-icon, an icon in PNG format, without ALPHA channel, without transparent background and with dimensions of 180x180.
On iPhone it is wonderful, it works perfectly, but on MacOS it is very well done.
In my HTML I have only declared:
<link rel="apple-touch-icon" type="image/png" href="apple-touch-icon.png">
Is there any way to declare an iOS specific icon and a different MacOS icon via HTML?
Result in iOS:
Result in MacOS:
I had given up looking for an answer or understanding how it all works, but I accidentally found that if you declare an icon of 128x128 size it overwrites the apple-touch-icon on MacOS (OS X).
I haven't found this documented anywhere.
As I understand the AppleTouchIcon in the end only works for Safari. Google Chrome and Edge follow the standard specification of WebApps.
<link rel="icon" type="image/png" href="icon2.png" sizes="128x128">
As you can see in the image above the icon has rounded edges, it wasn't perfect like the native apps but it was the way I expected.