怎么利用HTML的manifest.json的icons数组配置不同尺寸的应用图标-html教程-PHP中文网

manifest.json 的 icons 数组仅在 PWA 安装时生效，需 HTTPS、正确 MIME 类型、link 标签及路径响应；iOS 依赖 apple-touch-icon，Windows 依赖 msapplication-TileImage，Android 快捷方式可能忽略 manifest，favicon 则通用。

怎么利用html的manifest.json的icons数组配置不同尺寸的应用图标

HTML 的 manifest.json 里 icons 数组不被浏览器当作“应用图标”使用——它只在 PWA 安装场景下生效，且必须配合和正确的 MIME 类型（application/manifest+json）才能触发。直接在普通 HTML 页面里写这个数组，对桌面快捷方式、iOS 添加到主屏幕、Windows 开始菜单等毫无作用。

为什么 `icons` 数组在 PWA 场景下经常“不显示”

常见错误是只写了 icons 却漏掉关键前提：

manifest.json 文件必须通过 HTTPS 提供（localhost 除外），HTTP 下会被浏览器静默忽略
必须放在中，且路径要能 200 响应（用浏览器 DevTools 的 Network 标签确认）
响应头必须包含 Content-Type: application/manifest+json；Nginx/Apache 默认可能返回 text/plain，导致解析失败
图标文件路径是相对于 manifest 文件的，不是 HTML 页面——比如 "src": "icons/icon-192.png" 意味着和 manifest.json 同级的 /icons/icon-192.png

`icons` 数组中每个对象的关键字段怎么填才有效

浏览器会根据设备像素比（dpr）、系统需求自动选最匹配的 icon，但前提是字段语义正确：

src：必须是绝对路径或相对于 manifest 的相对路径，不能是 data URL（部分 Android 浏览器不支持）
sizes：必须是字符串，格式为 "192x192" 或 "192x192 512x512"（多个尺寸空格分隔），不能写成 192 或 [192, 512]
type：建议显式声明，如 "image/png"；Chrome 对缺失 type 的 PNG 图标有时会 fallback 失败
purpose：可选值为 "any"、"maskable" 或 "any maskable"；iOS 不识别 maskable，仅 Android/Chrome 支持裁剪为圆形，别误以为加了就能覆盖所有平台

典型写法示例：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

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

不同平台实际依赖的图标配置根本不在 `manifest.json` 里

想让图标在各种环境正确显示，光靠 manifest.json 远不够：

iOS “添加到主屏幕”：完全忽略 manifest.json，只认，且要求尺寸精确为 180×180（iPhone X 及以后），sizes 属性可选但推荐写上
Windows PWA（Edge/Chrome）：除了 manifest，还会读取和
Android 桌面快捷方式：如果用户从 Chrome 地址栏点“安装”，才会读 manifest；但若用户手动长按地址栏创建快捷方式，则只用 favicon
Favicon：所有浏览器都优先读，.ico 文件需内嵌多尺寸（16×16、32×32、48×48），PNG 格式需额外加 type 属性声明