Favicon 是在浏览器标签页中代表您网站的小图标。对于渐进式 Web 应用 (PWA),您还需要 Web 清单和用于移动主屏幕的更大图标。
安装网站小图标与 PWA 图标
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 内的文件复制到网站公开目录并发布到域名根路径,或按所选目录调整引用。
- 修改 site.webmanifest 的 name 和 short_name。start_url 与 scope 相对 manifest 所在位置;导出的图标路径以 / 开头。图标放在子目录时,请修改这些路径。
- 在 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">这些图标未按 maskable 素材设计。ZIP 不添加 service worker 或离线功能,只有图标不能保证可安装。请在目标浏览器和设备上测试。
阅读 Web、PWA 与 Chrome 集成指南