+ Icon masks and safe zone +
++ Some platforms have their own preferred icon shape, but as web + applications should work across multiple platforms, it is possible to + indicate that an icon can have a user-agent-specified mask applied by + adding the maskable purpose. This allows the platform to ensure + that the icon looks well integrated with the platform, and even apply + different masks and background colors in different places throughout + the platform. +
++ The safe zone is the area within a maskable icon + which is guaranteed to always be visible, regardless of user agent + preferences. It is defined as a circle with center point in the center + of the icon and with a radius of 2/5 (40%) of the icon size, which means + the smaller of the icon width and height, in case the icon is not + rectangular. +
++ Designers of maskable icons will want to make sure that all + important parts are within the safe zone. +
+
+ + All pixels in this zone are guaranteed to be seen in all masks. + Pixels outside the safe zone are not guaranteed to (but can) be visible + depending on the applied mask. +
++ The user agent MAY apply a mask of any size, making any pixels that + are more than 2/5ths of the image size (minimum of width and height + if non-square) away from the center (the safe zone) + transparent. +
++ The user agent MUST NOT make any pixel within the safe zone + transparent. +
++ The user agent MAY enlarge the icon by adding additional padding. +
++ If the icon contains transparent pixels, the user agent MUST composite + the icon onto a solid color (eg. white) of the user agent's choice. +
++ It is suggested that designers avoid using transparent pixels in maskable + icons. +
++ Examples of masks +
++ By staying inside the safe zone, most icons will have around + 10% padding on the top, bottom, right and left with no content or + non-essential content, such as an icon background. + It is suggested that developers check their icon when all but the + safe zone is masked out. +
++ Icons with "maskable" purpose +
+
+ 
+ + Mask examples +
+
+ 
+ 
+ 
+ 
+