什么是 maskable 图标?

Android 自适应图标将你的图标裁剪为系统定义的形状（圆、squircle、圆角方）。`purpose: maskable` 图标在 logo 周围包含安全区域 padding，所以裁剪不会切掉边缘。在 192/512 生成 logo 周围 ~20% padding 的 maskable 变体。

我需要 manifest.json 和 Apple meta 标签两者吗?

如果你想在 iOS 上 install-to-home-screen，是的。Apple 有部分 manifest 支持（theme_color、通过 `apple-touch-icon` 的图标）但忽略大多数。`apple-mobile-web-app-capable` meta 是实际让 iOS 把你站点视为独立应用的东西。

PWA Manifest 构建器

PWA manifest 告诉浏览器和操作系统如何安装和呈现你的 web app：启动图标、闪屏颜色、全屏 vs 浏览器 chrome、支持的方向、深链 scope。这个构建器生成符合规范的 `manifest.json`，包含你实际需要的字段，包括合理的默认图标集（192px 和 512px，带 Android 安全区域的 maskable 变体）。输出还包括 `<link rel="manifest">` 加上 Apple 特定的 `apple-mobile-web-app-*` meta 标签，因为 Apple 仍未实现完整的 manifest 支持，跨平台可安装性需要两者。一切可编辑；JSON 在你键入时重新生成。

—

NameShort name (主屏)

描述

Start URLScope

Display 模式方向

Theme color

Background color

Lang方向 (Direction)类别

图标

图标基础路径

manifest.json

{
  "name": "My App",
  "short_name": "MyApp",
  "description": "A progressive web app",
  "start_url": "/",
  "scope": "/",
  "display": "standalone",
  "theme_color": "#0ea5e9",
  "background_color": "#ffffff",
  "lang": "en",
  "categories": [
    "productivity",
    "utilities"
  ],
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    }
  ]
}

HTML head (link + Apple meta)

<link rel="manifest" href="/manifest.json" />
<meta name="theme-color" content="#0ea5e9" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="apple-mobile-web-app-title" content="MyApp" />
<link rel="apple-touch-icon" href="/icons/icon-180.png" />

用 `Content-Type: application/manifest+json` 提供 manifest.json。Lighthouse PWA 审计会标记缺失字段。

使用方法

设置 name + short_name（short_name 显示在主屏 — 保持 12 字符以下）。设置 start_url 为应用启动时打开的位置。
选 display 模式：`standalone`（无浏览器 UI，推荐）最常用。`fullscreen` 隐藏状态栏；`minimal-ui` 保留薄浏览器 shell。
添加图标。默认覆盖 Android（192/512）、自适应图标的 maskable 变体。把 JSON 复制到 `manifest.json`，HTML 复制到你的 `<head>`。

常见问题

什么是 maskable 图标?: Android 自适应图标将你的图标裁剪为系统定义的形状（圆、squircle、圆角方）。`purpose: maskable` 图标在 logo 周围包含安全区域 padding，所以裁剪不会切掉边缘。在 192/512 生成 logo 周围 ~20% padding 的 maskable 变体。
我需要 manifest.json 和 Apple meta 标签两者吗?: 如果你想在 iOS 上 install-to-home-screen，是的。Apple 有部分 manifest 支持（theme_color、通过 `apple-touch-icon` 的图标）但忽略大多数。`apple-mobile-web-app-capable` meta 是实际让 iOS 把你站点视为独立应用的东西。

PWA Manifest 构建器

使用方法

常见问题

相关工具

Favicon 生成器（多尺寸 PNG）

/.well-known/* URI 参考

JWT 解码器

Plist 查看器（二进制与 XML）

JSON Patch 构建器 (RFC 6902)

JSON 格式化与校验工具