现代 Favicon 与 PWA 图标配置
在本地生成 favicon、Apple touch icon 与 PWA PNG 尺寸,并接入 HTML link 与 manifest icons,无需上传 logo。
发布网站或 PWA 时,仍需要一组浏览器和主屏幕能识别的图标文件。你可以在本地生成 PNG 尺寸,并复制引用它们的 HTML / manifest 片段。
通常需要哪些资源
| 资源 | 常见尺寸 | 文件名 |
|---|---|---|
| Favicon | 16 / 32 / 48 | favicon-16x16.png 等 |
| Apple touch | 180×180 | apple-touch-icon.png |
| PWA | 192 / 512 | icon-192.png、icon-512.png |
现代浏览器可通过 <link rel="icon" type="image/png" …> 使用 PNG favicon。已有 PNG 链接时,单独的 legacy .ico 通常可选。
本地工作流
- 准备方形或高分辨率 logo PNG。
- 打开 Favicon 生成器。
- 裁剪填满适合铺满方形的标识;完整保留适合需要留白的宽 logo。
- 仅在需要填充留白或铺平透明区域时启用背景色。
- 点击生成图标并下载 zip(含
manifest.webmanifest)。 - 将 HTML link 片段放入
<head>,把 manifesticons粘贴进 PWA manifest。
裁剪填满 vs 完整保留
- 裁剪填满:裁成方形,适合图标区域应被标识铺满的场景。
- 完整保留:完整 logo 缩放在方形内并留白,适合字标和宽扁 logo。
不是应用商店上架素材
App Store / Google Play 截图有独立 preset 与 checklist。商店素材请用应用商店图片尺寸工具;favicon 生成器面向网站 / PWA 发布。