Web、PWA 与 Chrome 图标

Web ZIP 包含 favicon.ico、16/32 px PNG、180 px Apple touch 图标、192/512 px PWA 图标、site.webmanifest 和 1200x630 的 og.png。

Web ZIP 文件说明

两张 PWA PNG 是普通正方形图标，文件名与尺寸对应 site.webmanifest 的 icons 数组；og.png 是独立的分享图片。

Web/
  favicon.ico
  favicon-16x16.png
  favicon-32x32.png
  apple-touch-icon.png
  android-chrome-192x192.png
  android-chrome-512x512.png
  site.webmanifest
  og.png
  README.txt

将图标接入网站

1. 将 Web 内的文件复制到网站公开目录并发布到域名根路径，或按所选目录调整引用。
2. 修改 site.webmanifest 的 name 和 short_name。start_url 与 scope 相对 manifest 所在位置；导出的图标路径以 / 开头。图标放在子目录时，请修改这些路径。
3. 在 HTML head 添加 manifest、favicon 与 Apple touch 引用。使用 HTTPS 或 localhost。在浏览器开发者工具中检查 manifest，并确认每个图标 URL 返回图片，而非 HTML 回退页。

<link rel="manifest" href="/site.webmanifest">
<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

{
  "name": "My App",
  "short_name": "App",
  "start_url": "./",
  "scope": "./",
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

这些图标未按 maskable 素材设计。ZIP 不添加 service worker 或离线功能，只有图标不能保证可安装。请在目标浏览器和设备上测试。

Favicon 和 PWA 图标生成器

导出 Chrome 扩展图标与宣传图片

上传现有素材并选择 Chrome，即可下载图标 PNG 与矩形宣传图。宣传图将素材居中放在白色画布上，提交商店前请完成设计检查。

• 扩展图标：16、32、48、128 px PNG，以及 Manifest V3 起始文件。
• 商店图标（128x128）：用于 Chrome Web Store 商店页面的独立 PNG。
• 小宣传图（440x280）：用于商店小宣传位的不透明 PNG。
• Marquee（1400x560）：可选的大宣传图，与商店截图不同。
• 商店截图：请另行截取真实扩展界面，尺寸为 1280x800 或 640x400。此工具不截屏，也不添加截图边框。

Chrome 扩展图标与商店图片生成器

官方参考

• Web App Manifest
• Chrome Web Store