能够适应平台的应用图标。
什么是可遮盖式图标？
如果您在新款 Android 手机上安装了渐进式 Web 应用，可能会注意到该图标显示为白色背景。Android Oreo 引入了自适应图标，可在不同设备型号上以各种形状显示应用图标。未遵循这种新格式的图标将采用白色背景。
可遮盖式图标是一种新的图标格式，不仅赋予您更多掌控力，还可让您的渐进式 Web 应用使用自适应图标。如果您提供可遮盖图标，则图标可以填满整个形状，并在所有 Android 设备上呈现出色效果。Firefox 和 Chrome 最近添加了对这种新格式的支持，您可以在应用中采用这种格式。
我当前的图标准备好了吗？
由于可遮盖图标需要支持各种形状，因此您需要提供带有一些内边距的不透明图片，让浏览器能够剪裁到所需的形状和大小。最好不要依赖于任何特定形状，因为最终形状因浏览器和平台而异。
幸运的是，所有平台都认可一个明确定义的标准化“最小安全区”。图标的重要部分（例如徽标）应位于图标中心的圆形区域内，且半径等于图标宽度的 40%。外侧的 10% 边缘可能会被剪裁。
您可以使用 Chrome 开发者工具查看图标的哪些部分位于安全区域内。打开渐进式 Web 应用，启动开发者工具并前往应用面板。在图标部分中，您可以选择仅显示可遮盖式图标的最小安全区域。系统会剪辑您的图标，以便仅显示安全区域。如果您的徽标在此安全区域内可见，您就可以放心使用。
如需测试可遮盖图标以及各种 Android 形状，请使用 Tiger 创建的 Maskable.app 工具。打开一个图标，然后 Maskable.app 可让您尝试各种形状和尺寸，还可以与团队中的其他人分享预览。
如何采用可遮盖式图标？
如果您想根据现有图标创建可遮盖图标，则可以使用 Maskable.app Editor。上传您的图标，调整颜色和大小，然后导出图片。
创建可遮盖图标并在开发者工具中对其进行测试后，您需要更新 Web 应用清单以指向新资源。Web 应用清单以 JSON 文件中提供 Web 应用的相关信息，并包含一个 icons 数组。
如需包含可遮盖图标，purpose 字段会告知浏览器应如何使用您的图标。默认情况下，图标的用途为 "any"。在 Android 设备上的白色背景上，系统会调整这些图标的大小。
{
…
"icons": [
…
{
"src": "path/to/regular_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "any"
},
{
"src": "path/to/maskable_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "maskable" // <-- New property value `"maskable"`
},
…
],
…
}
可遮盖图标应为 purpose 使用不同的值："maskable"。这表示图片应与图标遮罩搭配使用，以便您更好地控制结果。这样，您的图标就不会采用白色背景。如果您希望在其他设备上不借助蒙版来使用可遮盖图标，还可指定多个以空格分隔的用途（例如 "any maskable"）。
这样，您就可以开始创建自己的可遮盖图标，确保应用从边缘到边缘都有精美外观（而这很有价值，那就是圆形到圈、椭圆形到椭圆形 😄?）。
致谢
本文由 Joe Medley 审核。