PWA 图标要求和安全区域详解

理解 PWA 图标

渐进式 Web 应用（PWA）彻底改变了 Web 应用与操作系统的集成方式。这种集成的一个关键方面是应用图标 - 您品牌在用户设备上的视觉代表。与传统应用图标不同，PWA 图标必须适应不同平台上的各种形状和上下文。

PWA 图标的两种类型

1. 标准图标

标准 PWA 图标很简单：

• 显示带透明度的完整 Logo
• 用于应用商店、设置和传统方形上下文
• 类似于常规网站图标，但尺寸更大

2. 可遮罩图标

可遮罩图标更有趣：

• 必须包含额外的内边距以适应平台特定的遮罩
• 适应圆形、方圆形、泪滴形和其他形状
• 需要仔细考虑安全区域

关键的安全区域概念

什么是安全区域？

安全区域是图标的中心部分，无论平台应用何种遮罩形状，都保证可见。此区域外的所有内容都可能被裁剪。

40dp 半径规则

Android 的自适应图标规范将安全区域定义为 108dp 视口内半径为 33dp 的圆。对于 Web 标准，这大约相当于图标宽度和高度的 80%。

实用的安全区域指南

完整图标尺寸：512x512px
安全区域：410x410px（80%）
每边边距：51px（10%）

视觉表示：

• 外部方形：完整的 512x512 图标区域
• 内部圆形：关键内容必须适合的安全区域
• 边距区域：可能被平台遮罩裁剪

可遮罩图标的设计最佳实践

1. 将关键元素居中

将您的 Logo 标记或最重要的视觉元素放在图标中心 80% 的区域内。这确保它在所有遮罩形状中都保持可见。

2. 扩展背景元素

虽然关键内容保持在安全区域内，但将背景颜色或图案扩展到完整的图标边界。这可以防止尴尬的裁剪或白边。

3. 使用多种遮罩测试

您的图标在以下遮罩下应该看起来不错：

• 圆形（最严格）
• 圆角方形（iOS 风格）
• 方圆形（Android 风格）
• 泪滴形（某些 Android 启动器）

4. 避免在边缘附近放置文字

文字元素特别容易被裁剪。将所有文字保持在安全区域内，最好在中心 60% 内。

技术实现

Manifest.json 配置

{
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icon-maskable-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "/icon-maskable-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

关键点：

• 同时提供 "any" 和 "maskable" 用途的图标
• 最小尺寸：192x192 和 512x512
• PNG 格式以获得最大兼容性
• 标准和可遮罩变体使用单独的文件

要避免的常见错误

1. 为两种用途使用相同的图标

❌ 错误方法：使用标准 Logo 作为可遮罩图标 ✅ 正确方法：创建具有适当内边距的特定可遮罩变体

2. 忽略平台差异

不同平台应用不同的遮罩：

• Android：根据启动器的不同形状
• iOS：圆角方形（添加到主屏幕时）
• Windows：可能带透明度的方形磁贴

3. 过度填充可遮罩图标

虽然安全区域内边距至关重要，但过多的内边距会使您的图标显得太小。坚持 10% 的边距指南。

测试您的 PWA 图标

在线工具

1. Maskable.app：使用不同的遮罩形状预览您的图标
2. PWA Asset Generator：测试完整的图标集
3. Logo Foundry：自动验证和安全区域合规性

设备测试

1. 在各种设备上安装您的 PWA
2. 检查应用抽屉/主屏幕中的外观
3. 验证任务切换器和通知中的图标
4. 在浅色和深色主题上测试

特定平台注意事项

Android 自适应图标

• 前景和背景层
• 总尺寸 108dp，可见区域 72dp
• 可能的动态视觉效果

iOS Web 应用

• 添加到主屏幕使用 webkit 元标签
• 如果 PWA 图标不可用，则回退到 apple-touch-icon
• 不支持透明度（添加白色背景）

Windows PWA

• 基于磁贴的系统，具有各种尺寸
• 支持透明背景
• 可以包含动态磁贴功能

最佳实践总结

✅ 从一开始就考虑安全区域进行设计
✅ 创建单独的标准和可遮罩图标变体
✅ 跨多个平台和遮罩形状进行测试
✅ 将背景扩展到完整的图标边界
✅ 保持关键内容居中
✅ 在部署前使用在线工具验证

使用 Logo Foundry 生成 PWA 图标

Logo Foundry 自动处理 PWA 图标生成的复杂性：

1. 自动安全区域计算：确保您的 Logo 完美适配
2. 多变体生成：标准和可遮罩版本
3. 特定平台优化：为每个操作系统量身定制
4. 验证报告：在部署前识别潜在问题

结论

创建适当的 PWA 图标需要了解安全区域和平台要求的细微差别。通过遵循这些指南并利用 Logo Foundry 等工具，您可以确保您的 PWA 在所有设备和上下文中看起来专业且易于识别。

准备好生成符合 PWA 标准的图标了吗？试用 Logo Foundry，让我们处理技术复杂性，您专注于您的品牌。