PWA 图标：maskable 与安全区域适配

---

title: PWA 图标：maskable 与安全区域适配

keywords:

• maskable
• Web App Manifest
• 图标安全区域
• 适配
• 角标

description: '介绍 PWA 的 maskable 图标与安全区域适配，使用 purpose: maskable 提供可裁剪区域，避免系统蒙版裁剪重要内容，并给出设计与清单示例。'

categories:

• 应用软件
• 主题壁纸

---

概述

不同平台会对应用图标施加蒙版（圆形、圆角等）。maskable 图标在清单中声明安全区域与可裁剪边界，确保品牌与关键图形不被裁剪，提升一致性。

Manifest 示例

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

工程建议

• 设计安全区：遵循平台提供的安全区域模板；避免将重要元素放在边缘。
• 多尺寸与格式：提供常见尺寸（192/512）；PNG 与透明背景。
• 兼容：不支持平台忽略 purpose；仍使用默认图标。

参考与验证

• web.dev Maskable icons 指南：https://web.dev/articles/maskable-icon
• W3C Manifest 文档：https://w3c.github.io/manifest/