Re: [w3c/manifest] Icon shapes and masking (#555)

https://developer.android.com/preview/features/adaptive-icons.html
https://docs.microsoft.com/en-us/windows/uwp/controls-and-patterns/tiles-and-notifications-app-assets

So looked at what Windows and Android O now does. The adaptive idea with two images would work well, especially for Windows as well, if you think about full-bleed branded tiles which has to have a margin of 1/6 of the size (which is the same for adaptive icons, yay!)

Example text:

> Adaptive icons are icons which are prepared to support masks and animations. Each icon consists of two similarly sized square images. A foreground image, which can be considered the main icon, and a background image, which may and may not be used given the platform.
> 
> The inner 2/3 of the images appears within the mask. Thus, that part is what makes up the final image, i.e. by default there will be a margin of 1/6 of the size.
> 
> For special animations, each layer may move up to 1/3 of the icon size in each of the directions.
>
> In order to use adaptive images, you define `"foreground"` and `"background"` properties of icon objects. A `"src"` can be added in order as a fallback for vendors which do not support adaptive images.

```
  "icons": [
      {
        "foreground": "icon/fg.png",
        “background”: “icon/bg.png”,
        “src”: “icon/fallback.png”, 
        "sizes": "432x432",
        "type": "image/png"
      }
   ]
```

On Windows 10, a full-bleed tile can be generated from an adaptive image by ignoring the background and using only the foreground image.

The default Android sizes are 108px, 216px, 324px and 432px for 1 to 4dp respectively. For Windows, that is 96px, 192px, 288px, and 384px, so the Android sizes should work fine on Windows when scaled a bit down, though developers can add these extra sizes to get super clear unscaled images.

iOS has a few masks with rounded corners (the size of the rounded corner differs from iPad and iPhone for some reason) but applying such filters to the adaptive icons.

iOS supports 1dp and 2dp as far as I can tell, with the following sizes:

57px+72px 1dp   - 13px for corners 
114px+144px 2dp  -26px for corners

Applying such a mask (covering 2/3 of the icon size) and scaling to those sizes should still provide quite clear images. Example, using 216 from above (2dp Android adaptive)

216px / 3 * 2 = 144px which is the iPad 2dp size!





-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3c/manifest/issues/555#issuecomment-288380913