Favicon尺寸大全
各平台 Favicon 尺寸与文件清单：favicon.ico、16/32/48 PNG、apple-touch-icon、manifest 192/512、maskable 与 Safari 固定标签页图标，附可直接粘贴的 HTML 与 manifest 片段。
浏览器本地运行所有计算都在你的浏览器里完成，数据不会离开本机。
筛选规格
按关键词或等级过滤；关键词可以匹配文件名、尺寸、格式与用途。
尺寸规格表
整理时点 2026-10，平台可能调整。依据：W3C Web App Manifest、Apple apple-touch-icon 约定、Microsoft 浏览器配置与各浏览器对 sizes="any" 的支持情况。
共 14 条
| 文件名 | 尺寸 | 格式 | 用途 | 等级 | HTML 片段 |
|---|---|---|---|---|---|
| favicon.ico | 16/32/48 多尺寸 | ICO | 老浏览器与书签栏的兜底图标，建议把 16、32、48 打进同一个 .ico | 必备 | <link rel="icon" href="/favicon.ico" sizes="32x32"> |
| favicon-16x16.png | 16 × 16 | PNG | 浏览器标签页图标 | 必备 | <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> |
| favicon-32x32.png | 32 × 32 | PNG | 高分辨率标签页与书签图标 | 必备 | <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> |
| favicon-48x48.png | 48 × 48 | PNG | Windows 桌面快捷方式图标 | 推荐 | <link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png"> |
| favicon-96x96.png | 96 × 96 | PNG | 部分安卓浏览器与桌面小组件 | 可选 | <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png"> |
| favicon.svg | any（矢量） | SVG | 任意尺寸清晰，现代浏览器优先使用 | 推荐 | <link rel="icon" type="image/svg+xml" href="/favicon.svg" sizes="any"> |
| apple-touch-icon.png | 180 × 180 | PNG | iOS 添加到主屏的图标（不能透明） | 必备 | <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> |
| apple-touch-icon-152x152.png | 152 × 152 | PNG | iPad 主屏图标 | 可选 | <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png"> |
| apple-touch-icon-167x167.png | 167 × 167 | PNG | iPad Pro 主屏图标 | 可选 | <link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png"> |
| android-chrome-192x192.png | 192 × 192 | PNG | Android 主屏与 manifest 图标 | 必备 | <link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png"> |
| android-chrome-512x512.png | 512 × 512 | PNG | 启动画面与商店展示 | 必备 | <link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png"> |
| maskable-512x512.png | 512 × 512 | PNG | maskable 图标：图形要放在中间 80% 安全区内 | 推荐 | <link rel="icon" type="image/png" sizes="512x512" href="/maskable-512x512.png"> |
| safari-pinned-tab.svg | any（单色矢量） | SVG | Safari 固定标签页用的单色图标 | 可选 | <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#0f172a"> |
| mstile-150x150.png | 150 × 150 | PNG | Windows 磁贴图标（配合 browserconfig.xml） | 可选 | <meta name="msapplication-TileImage" content="/mstile-150x150.png"> |
配套文件
- site.webmanifest · PWA 图标与主题色声明
- browserconfig.xml · Windows 磁贴配置
必备文件清单
这 6 个文件齐全，主流浏览器与 iOS 主屏就能正常显示。
favicon.ico favicon-16x16.png favicon-32x32.png apple-touch-icon.png android-chrome-192x192.png android-chrome-512x512.png
完整 HTML 片段
<!-- favicon：整理时点 2026-10 --> <link rel="icon" href="/favicon.ico" sizes="32x32"> <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="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png"> <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png"> <link rel="icon" type="image/svg+xml" href="/favicon.svg" sizes="any"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png"> <link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png"> <link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png"> <link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png"> <link rel="icon" type="image/png" sizes="512x512" href="/maskable-512x512.png"> <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#0f172a"> <meta name="msapplication-TileImage" content="/mstile-150x150.png"> <link rel="manifest" href="/site.webmanifest"> <meta name="theme-color" content="#0f172a">
按顺序粘进 <head> 即可；路径按你的站点根目录调整。
site.webmanifest 示例
{
"name": "Your site",
"short_name": "Site",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
},
{
"src": "/maskable-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
],
"theme_color": "#0f172a",
"background_color": "#ffffff",
"display": "standalone"
}纯文本清单
favicon.ico · 16/32/48 多尺寸 · ICO · required · 老浏览器与书签栏的兜底图标，建议把 16、32、48 打进同一个 .ico favicon-16x16.png · 16 × 16 · PNG · required · 浏览器标签页图标 favicon-32x32.png · 32 × 32 · PNG · required · 高分辨率标签页与书签图标 favicon-48x48.png · 48 × 48 · PNG · recommended · Windows 桌面快捷方式图标 favicon-96x96.png · 96 × 96 · PNG · optional · 部分安卓浏览器与桌面小组件 favicon.svg · any（矢量） · SVG · recommended · 任意尺寸清晰，现代浏览器优先使用 apple-touch-icon.png · 180 × 180 · PNG · required · iOS 添加到主屏的图标（不能透明） apple-touch-icon-152x152.png · 152 × 152 · PNG · optional · iPad 主屏图标 apple-touch-icon-167x167.png · 167 × 167 · PNG · optional · iPad Pro 主屏图标 android-chrome-192x192.png · 192 × 192 · PNG · required · Android 主屏与 manifest 图标 android-chrome-512x512.png · 512 × 512 · PNG · required · 启动画面与商店展示 maskable-512x512.png · 512 × 512 · PNG · recommended · maskable 图标：图形要放在中间 80% 安全区内 safari-pinned-tab.svg · any（单色矢量） · SVG · optional · Safari 固定标签页用的单色图标 mstile-150x150.png · 150 × 150 · PNG · optional · Windows 磁贴图标（配合 browserconfig.xml）
CSV 表格
id,fileName,width,height,sizeLabel,format,requirement,purpose ico,favicon.ico,32,32,16/32/48 多尺寸,ICO,required,"Fallback for older browsers and bookmarks; pack 16, 32 and 48 into one .ico" png-16,favicon-16x16.png,16,16,16 × 16,PNG,required,"Browser tab icon" png-32,favicon-32x32.png,32,32,32 × 32,PNG,required,"High-density tab and bookmark icon" png-48,favicon-48x48.png,48,48,48 × 48,PNG,recommended,"Windows desktop shortcut icon" png-96,favicon-96x96.png,96,96,96 × 96,PNG,optional,"Some Android browsers and desktop widgets" svg,favicon.svg,0,0,any（矢量）,SVG,recommended,"Scalable and preferred by modern browsers" apple-touch-180,apple-touch-icon.png,180,180,180 × 180,PNG,required,"iOS home screen icon (must not be transparent)" apple-touch-152,apple-touch-icon-152x152.png,152,152,152 × 152,PNG,optional,"iPad home screen icon" apple-touch-167,apple-touch-icon-167x167.png,167,167,167 × 167,PNG,optional,"iPad Pro home screen icon" android-192,android-chrome-192x192.png,192,192,192 × 192,PNG,required,"Android home screen and manifest icon" android-512,android-chrome-512x512.png,512,512,512 × 512,PNG,required,"Splash screen and store listing" maskable-512,maskable-512x512.png,512,512,512 × 512,PNG,recommended,"Maskable icon: keep artwork inside the central 80% safe zone" safari-pinned-tab,safari-pinned-tab.svg,0,0,any（单色矢量）,SVG,optional,"Monochrome icon for Safari pinned tabs" mstile-150,mstile-150x150.png,150,150,150 × 150,PNG,optional,"Windows tile icon (with browserconfig.xml)"
这个工具能做什么
- 新站点上线前照清单补齐图标：6 个必备文件（favicon.ico、16/32 PNG、apple-touch-icon、192/512 PNG）齐全后浏览器与 iOS 主屏都正常。
- 做 PWA 时确认 manifest 里的图标：192 与 512 各一张，再加一张 maskable 保证安卓自适应裁切不出白边。
- 把完整 HTML 片段直接粘进 <head>，不用回忆 rel 与 sizes 的写法，也避免漏掉 sizes="any" 的 SVG。
- 排查「图标不更新」问题时对照表里的文件名，确认是不是某个尺寸缺失导致浏览器回退到默认图标。
示例
输入
等级筛选选「必备」
输出
列出 6 个文件：favicon.ico（16/32/48 多尺寸）、favicon-16x16.png、favicon-32x32.png、apple-touch-icon.png（180 × 180）、android-chrome-192x192.png、android-chrome-512x512.png，并给出对应的 6 行 HTML 片段。
必备清单之外还有推荐与可选条目：favicon.svg（矢量）、maskable-512x512.png（自适应裁切）、48/96 PNG 与 Safari 固定标签页单色图标。
常见问题
favicon.ico 还要不要留？
要。现代浏览器优先读 PNG 与 SVG，但老浏览器、书签栏、部分抓取工具仍会请求 /favicon.ico。建议把 16、32、48 三个尺寸打进同一个 .ico，作为兜底。
apple-touch-icon 为什么不能带透明？
iOS 会把图标垫在白色背景上再裁圆角，如果 PNG 有透明区域，透明处会变成白块，边缘看起来像缺了一角。所以这个文件要用不透明背景。
maskable 图标和普通图标有什么区别？
maskable 允许安卓把图标裁成圆形、方形或水滴形，所以图形必须放在中间 80% 的安全区内，边缘只放背景色；普通图标被裁切时可能切掉主体。
SVG 图标要写 sizes 吗？
要写 sizes="any"，表示矢量可以任意缩放。现代浏览器看到 rel="icon" type="image/svg+xml" 且 sizes="any" 时会优先使用它，缩放最清晰。
改完图标浏览器还是显示旧的？
图标缓存非常顽固。可以先强制刷新（Ctrl/Cmd + Shift + R），或临时把文件名换成带版本号的新名字（例如 favicon-32x32-v2.png），确认新图生效后再换回来。
关键词：favicon sizesapple touch iconfavicon ico pngweb manifest iconsmaskable iconFavicon 尺寸网站图标规格apple-touch-iconmanifest 图标图标清单