Maskable Icons

[00:00:00]
>> Before finishing talking about icons, we need to talk about maskable icons. Bcause that's something that affects Android, and it will affect our icon. As we saw before, up to Android 7, this kind of phone at this point, Android accepted icons in any shape. So you could actually provide icons that are transparent, so if you look at that get Get Kana, it's a Japanese PWA, or the NASA icon, is fully transparent with its own shape.

[00:00:33]
But from Android 8, all the icons must comply with the shape, that is set at the OS level. And each launcher or each manufacturer can set a different shape, you have circle, a squircle, rounded square, square, blah, blah, blah, blah they can be many shapes. So when you provide your icon, your icon should be prepared for being adaptive to these different shapes.

[00:01:00]
So, because if not, look at what happens with the NASA icon at the right, or the Get Kana icon, or even Lyft. So they are actually smaller within a shape because, we're not providing an icon compatible with multi shapes. To solve the problem in the webapp manifest, we must provide the maskable icon, okay?

[00:01:26]
Iit's a serious square icon like the one that we have, but with enough discardable panning content out, of what is known as a safe area. So this is the official definition from the W3C spec, it's a sensory position circle with a radius of 40% of the icon's width, and this point you're thinking what?

[00:01:50]
Okay, that's right you understand what's going on, we have an icon, it's in a square. We need to actually render a circle in the middle, with a radius of 40%, and that's known as a safe area. Everything that is outside of that safe area, can be actually be outside of the icon, so we should be very careful of what we're doing.

[00:02:13]
How do you solve these from the word manifest spec? It's another icon with a property purpose, maskable, that's all. So it's pretty simple but, we actually need to check if our icon, works well or not. To do that, I'm going to an online free tool it's called Maskable.app.

[00:02:43]
It's actually a PWA so you can install this maskable tool as a PWA if you want to, if not, you can use it from the browser. Here you can open your own icon, and see if how it looks like from different shapes. For example, I will select my icon, And here we can try different shapes.

[00:03:10]
And you can realize that we have a problem on different shapes on Android, my icon is not like maskable ready, right? Because, our content is outside of the safe area, so we can go to the editor in this maskable.app website, upload the file again. And from here, we can have a small web editor, we can add more padding until we are actually happy with that.

[00:03:39]
We can see how it looks like of course the background color doesn't look nice yet. But, I can pick the background color, change the color, and I can use a picker, to use the same color like that, okay? And now, it looks good on every Android phone, my PWA icon, will look good.

[00:04:03]
So I'm done, so I will just export this in the Mac size or I can just pick 512 by 512 is actually the one that is recommended for maskable. We'll download this, in my folder, and I can call this icon maskable, it's a PNG. We see now that we have our new icon, I just need to add a new entry, to the JSON.

[00:04:34]
It's going to point to maskable, it's 512 by 512, and now we need to add another property, it's called purpose, and the value is maskable. So now, if we go back to Chrome, And we load our PWA, looking at the icons here, I can see the new one.

[00:05:02]
And also there is a tester, a quick tester within Chrome here, that says, show only the minimum safe area for maskable icons. So now, it's going to show me, that this one looks good, that's actually the maskable. So, when we installed this on Android, it will actually use this one.

[00:05:22]
But because on Android we are not passing the criteria yet, and we want actually to have a full web APK, we will need to wait a couple of more minutes to actually see it in action.