现代 Favicon 与 PWA 图标配置

在本地生成 favicon、Apple touch icon 与 PWA PNG 尺寸,并接入 HTML link 与 manifest icons,无需上传 logo。

发布网站或 PWA 时,仍需要一组浏览器和主屏幕能识别的图标文件。你可以在本地生成 PNG 尺寸,并复制引用它们的 HTML / manifest 片段。

通常需要哪些资源

资源常见尺寸文件名
Favicon16 / 32 / 48favicon-16x16.png
Apple touch180×180apple-touch-icon.png
PWA192 / 512icon-192.pngicon-512.png

现代浏览器可通过 <link rel="icon" type="image/png" …> 使用 PNG favicon。已有 PNG 链接时,单独的 legacy .ico 通常可选。

本地工作流

  1. 准备方形或高分辨率 logo PNG。
  2. 打开 Favicon 生成器
  3. 裁剪填满适合铺满方形的标识;完整保留适合需要留白的宽 logo。
  4. 仅在需要填充留白或铺平透明区域时启用背景色。
  5. 点击生成图标并下载 zip(含 manifest.webmanifest)。
  6. 将 HTML link 片段放入 <head>,把 manifest icons 粘贴进 PWA manifest。

裁剪填满 vs 完整保留

  • 裁剪填满:裁成方形,适合图标区域应被标识铺满的场景。
  • 完整保留:完整 logo 缩放在方形内并留白,适合字标和宽扁 logo。

不是应用商店上架素材

App Store / Google Play 截图有独立 preset 与 checklist。商店素材请用应用商店图片尺寸工具;favicon 生成器面向网站 / PWA 发布。

相关工具

相关工具

使用本文提到的工具

Favicon / PWA 图标生成器favicon generator / pwa icon generator / apple touch icon generator响应式图片生成器srcset generator / responsive image generator / picture tag generator在线图片裁剪 / 截图裁剪image cropper / crop image online / crop screenshot应用商店图片尺寸工具app store screenshot size / google play feature graphic size / app store screenshot generator

返回文章列表