CODEWITHSUNDEEP
htmliosmacosweb-applicationsapple-touch-icon
Eduardo Mior
Eduardo Mior

Reputation: 244

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 iOS

Result in MacOS: enter image description here

Upvotes: 1

Views: 1099

Answers (2)

pkirilin
pkirilin

Reputation: 500

For MacOS, you can use masking to overcome this issue. In this case, you would need to adjust your icon manually to ensure the important parts of the icon appear well within the mask's safe zone (usually 4/5 of the icon's minimum size).

Then, you can check how your icon will look on different OS here ("Rounded Rectange" option for MacOS).

Then, add this icon to your PWA manifest file and mark it with purpose = maskable:

{
  "icons": [
    {
      "src": "<your_maskable_icon>.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

Upvotes: 0

Eduardo Mior
Eduardo Mior

Reputation: 244

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">

enter image description here

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.

Upvotes: 0

Related Questions