Favicon尺寸指南：完整尺寸参考 (2026)
对需要哪些favicon尺寸感到困惑？本完整指南涵盖了浏览器、移动设备和平台的所有标准favicon尺寸。另外，下载我们的免费favicon尺寸速查表。
先看结论：你至少需要这 6 个尺寸
如果你希望在 Chrome、Safari、Edge、iOS、Android 和 Windows 上都稳定显示， 建议先准备 16x16、32x32、48x48、180x180、192x192、512x512 这 6 个尺寸。 对大多数中小站点来说，这已经能覆盖 90% 以上场景。
- 16x16：浏览器标签页常用小图标。
- 32x32：高分屏标签页与书签展示。
- 48x48：Windows 与部分快捷方式场景。
- 180x180：Apple Touch Icon（iPhone / iPad）。
- 192x192：Android 主屏幕图标常用尺寸。
- 512x512：PWA 与应用商店级高分辨率图标。
不同平台的推荐策略（按使用频率）
实操中最常见问题不是“缺尺寸”，而是“尺寸有了但引用不一致”。 你需要把文件产出和 HTML 引用策略同时做好，避免浏览器回退到旧缓存。
- 优先提供
favicon.ico（包含 16x16 与 32x32）。 - 再提供 PNG：
32x32与192x192。 - Apple 设备额外提供
apple-touch-icon 180x180。 - PWA 项目补齐
manifest.json中的 192 与 512。
常见尺寸对照表（可直接照抄）
下面是可直接用于生产环境的最小稳定组合：
/favicon.ico：16、32（多尺寸 ICO）/favicon-16x16.png：兼容旧引用与第三方爬虫/favicon-32x32.png：主力浏览器显示/apple-touch-icon.png：180x180/android-chrome-192x192.png：Android / PWA/android-chrome-512x512.png：PWA 大图标
如何在 HTML 中正确引用
即使尺寸准备完整，如果引用顺序错误或路径不一致，也会出现“本地能看、线上不显示”。 下面这组引用顺序更稳：先 ICO，再 PNG，再 Apple 图标。
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">WordPress、Shopify、Astro 三类站点的差异
三类站点在“入口位置”不同：WordPress 通常在“站点身份”配置， Shopify 在主题设置，Astro / Next.js 则是文件系统 + 模板引用。 你应优先确认后台是否会自动覆盖头部标签，避免手动代码被主题更新重置。
- WordPress：先后台上传，再检查主题是否重复注入 icon 标签。
- Shopify：主题编辑器保存后，注意 CDN 缓存延迟。
- Astro：确保构建后文件位于
public/根目录。
5 个高频问题与排查步骤
- 图标不更新：先硬刷新，再清浏览器缓存与 CDN 缓存。
- 移动端不显示：确认是否提供 180x180 与 manifest 图标。
- 显示模糊：原图至少 512x512，导出时保持正方形。
- 颜色异常：优先使用 PNG，避免某些 ICO 压缩导致色偏。
- 搜索结果不显示：搜索引擎更新有延迟，通常需要数天到数周。
发布前检查清单（建议保存）
- 文件已上传：ICO + PNG + Apple Touch + PWA 图标。
- HTML 引用无 404，路径与大小写完全一致。
- 桌面端与移动端都做过实际验证。
- 更换图标后已完成缓存清理。
- 站点多语言版本共享同一套图标策略。