跳到主要内容

favicon 尺寸到底要几个?网站图标完整生成指南

讲清楚 favicon 该出 16/32/180/512 哪几个尺寸,各平台分别读哪一个,HTML link 标签怎么写,以及为什么现在用 PNG 而不是 .ico。

发布于 作者 李雷
#favicon #网站图标 #apple-touch-icon #前端

favicon 尺寸到底要几个?网站图标完整生成指南

很多人以为 favicon 就是放一个 32×32 的小图标完事。真到了各端去看,标签页糊、iOS 主屏一片空白、PWA 安装弹窗里图标被拉变形。问题不在图标本身,在于你只出了一种尺寸,而现在每个平台读的尺寸都不一样。

这篇把尺寸、平台、HTML 标签和格式选择一次说清楚。

现在到底需要哪几个尺寸

2026 年一套够用的 favicon,核心是这 4 个尺寸:

  • 16×16 PNG:Chrome、Firefox、Edge 普通屏标签页就读这个。它是被压缩得最狠的一张,细节越少越好。
  • 32×32 PNG:Retina / 高分屏标签页,以及部分浏览器的书签栏。很多人误以为 32 能兼顾 16,实际系统缩放后边缘会发虚。
  • 180×180 apple-touch-icon:iOS Safari 点「添加到主屏幕」时读它,作为主屏图标。喂一张平的方图就行,圆角和高光由 iOS 自己补。
  • 512×512 PNG:Android Chrome 和 PWA 安装时从 web manifest 里读,用于桌面图标和启动画面。

为什么不能只放一个?因为只放一种,别的平台会拿它去放大或缩小。一张 32×32 被 iOS 拉到 180,主屏图标必糊;一张 512 缩到 16,标签页里反而看不清字。各端各取所需,才不会在任何一个位置掉链子。

各平台分别读哪一个

把上面四张对应到平台,关系是这样的:

  • 桌面浏览器标签页 → 16 和 32
  • iOS Safari 主屏 / iPadOS 书签 → 180 的 apple-touch-icon
  • Android Chrome / 各类 PWA 安装 → 512(经由 web manifest)
  • 收藏夹、历史记录 → 多数复用 16 或 32

这也解释了一个常见困惑:你在 Mac 上看着图标好好的,同事在 iPhone 上加到主屏却是空白。那是因为页面没写 apple-touch-icon,iOS 找不到专门给它的那张,干脆截了张页面缩图顶上。

HTML link 标签怎么写

光有文件不够,得在 <head> 里告诉浏览器去哪儿找、那是什么。一套标准写法长这样:

<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="512x512" href="/favicon-512x512.png">

几个要点:rel="icon" 配 sizes 让浏览器自己挑合适那张;apple-touch-icon 单独一行,不带 type;512 那张更多是给 manifest 引用,标签里写上也无妨。最容易踩的坑是文件名对不齐,标签里写的是 apple-touch-icon.png,你却存成了 apple-touch-icon-180.png,iOS 直接 404,主屏照样空白。所以路径和文件名要一字不差。

如果你手里还有一张矢量 logo,可以在最上面再加一行 SVG:

<link rel="icon" type="image/svg+xml" href="/favicon.svg">

Chrome、Firefox、Safari 16+、Edge 都认它,一个文件矢量缩放无损。但 SVG 在 iOS 主屏、某些书签 UI、Android 512 manifest 这几处不工作,所以业界稳妥做法是 SVG 主推、PNG 兜底,两半都得有。

.ico 还是 PNG

老教程里清一色 favicon.ico,那是 1995 年的容器格式,当年只有 IE 6 读得了它。今天所有在跑的浏览器,包括兼容模式下的 IE 11,都能通过 <link rel="icon" type="image/png"> 直接读 PNG。PNG 在小图标上比 ICO 压得更小,alpha 通道也完整。除非你要伺候某个老旧企业内网系统,公网项目完全不必再纠结 .ico。真要那个文件,把 32×32 的 PNG 喂给任意一个一次性 ICO 转换器就行,不值得为它牺牲整条工具链的简洁。

我自己的做法

我给业余项目上线时最烦的就是这一步:逻辑都写完了,标签页却还顶着 Vite 那道闪电。早年我会开 Photoshop 切四张图,再去找 .ico 转换器,前后磨二十分钟。后来我固定用 favicon 生成器:打上产品名头两个字母,挑一个品牌色背景,点下载,4 个 PNG 加现成的 link 片段一起拿到,文件名跟下载按钮产出的完全一致,贴进 <head> 第一次就对齐,不用自己 rename。整件事压到两分钟以内,而且全程在浏览器本地跑,图片不出标签页。

如果你还需要别的图片占位资源,比如开发阶段先放一张尺寸标准的占位图,可以顺手用 占位图生成器 配一套,两个工具组合起来,从图标到占位图都能本地出全。

把这 4 个尺寸、对应的 link 标签、PNG 格式这三件事捋顺,你的站在标签页、iOS 主屏、Android 安装弹窗三处都会显示得干净一致,不会再出现某一端独独糊掉的情况。

Made by Toolora · Updated 2026-06-13