2026 年 favicon 尺寸指南：品牌真正需要哪些文件

发布于 2026年8月7日 · 更新于 2026年8月7日 · 6 分钟阅读

大多数品牌都不该只准备一个 favicon 文件。2026 年更实用的组合是：一个包含多尺寸回退的 favicon.ico、一个 32x32 PNG、一个 180x180 的 Apple touch icon，以及在网站可安装时准备 192x192 和 512x512 的 manifest 图标。这样同一个 logo 才能同时适配浏览器标签、Google Search、iOS 主屏保存和类似应用的安装场景。

在 2026 年 7 月 6 日复核 kitnex.ai 和现有博客后，可以看到站点已经很好地覆盖了 prompt、mockup、配色、文件格式、商用许可和上线清单，但仍缺一层真正的部署说明：当 logo 已经定稿后，应该如何拆成用户会在标签页、搜索结果、快捷方式和主屏上真实看到的那一组小图标。

核心要点

• Google Search 只接受每个站点一个方形 favicon，至少 8x8，并建议大于 48x48。
• iOS 主屏保存依赖 apple-touch-icon，而不是只看 rel=icon。
• 可安装网站更适合同时提供 manifest 图标，必要时再补一个 maskable 图标。
• 难点不是多导出几个文件，而是确保符号在极小尺寸下依然能读清。

favicon 应该做多大

Google 目前要求 favicon 必须是方形，至少 8x8 像素，并建议使用大于 48x48 的文件以便在不同表面上更清晰。它还只支持每个站点或 hostname 一个 favicon。所以与其做很多花样，不如先保证图形本身稳定清楚。对多数团队来说，实际可上线的答案不是一个 PNG，而是一组小尺寸浏览器回退、一个 Apple touch icon 和一组 manifest 图标。

• Google 最低要求：方形，至少 8x8。
• 更实用的清晰度目标：大于 48x48。
• 基础组合：favicon.ico + Apple touch + manifest。
• 图形语言应保持一致，只调整文件尺寸。

为什么一个文件不够

HTML 允许声明多个 rel=icon 文件，浏览器会根据类型和 sizes 选择更合适的版本；而 iOS 对 Web Clip 并不使用 rel=icon，而是寻找 apple-touch-icon。Apple 的文档也列出 152x152、167x167、180x180 这样的 touch icon 尺寸。这意味着同一个品牌符号需要按场景拆分文件，而不是把所有希望都压在一个图标上。

• 浏览器标签与书签：rel=icon。
• Google Search：从首页读取站点级 favicon。
• iOS 主屏保存：apple-touch-icon。
• 可安装网站：manifest 图标与 maskable 版本。

大多数品牌该准备的文件集

可从 favicon.ico 开始，里面放常见的小尺寸回退，例如 16x16、32x32、48x48；再补一个 32x32 PNG 给现代浏览器；然后准备 180x180 的 apple-touch-icon 供 iPhone 主屏保存使用，再加 192x192 和 512x512 的 manifest 图标给安装和 splash 场景。这和 Kitnex 现有的文件格式文章正好互补：目标不是无限导出，而是只做那些真的会被系统读取的文件。

• favicon.ico：浏览器与旧场景回退。
• favicon-32x32.png：现代标签页 raster 版本。
• apple-touch-icon.png 180x180：iPhone 主屏保存。
• icon-192x192.png：常见安装尺寸。
• icon-512x512.png：更大系统表面。
• 可选 maskable-icon-512x512.png：更适合 Android 风格裁切。

什么时候要加 maskable 图标

MDN 解释 manifest 图标可以带 any、maskable、monochrome 等 purpose；web.dev 则说明关键图形应留在中心安全区内，半径约为图标宽度的 40%，外侧 10% 在某些平台上可能会被裁掉。所以不要直接把完整字标硬缩小，更好的方法是提前准备更简洁的 symbol 版本，让它在圆角方块、圆形或 squircle 里都还能成立。

• 可安装场景要优先准备 maskable。
• 核心图形放在中心安全区。
• 避免长文字、细线和低对比细节。
• 在浅色和深色背景下都预览一次。

上线前怎么测试 favicon 资产

Google 要求 Googlebot-Image 能抓到 favicon 文件，Googlebot 能抓到首页，并提醒重新抓取可能需要几天到几周。因此最稳妥的做法是把图标放在稳定路径中，从首页 head 正确引用，然后尽量不要在上线后频繁改名。接着做视觉测试：真实打开浏览器标签、把网站保存到 iPhone 主屏、检查 Chrome 或 Android 的安装流程，并把图形缩到 16 到 32 像素去看。

• 一起检查 head 标签与 manifest。
• 在 iPhone 主屏上实际保存并查看。
• 如果网站可安装，就检查安装界面。
• 在 16 到 32 像素、深浅界面里都测一次。
• 上线后尽量冻结生产文件名。

常见问题

参考来源

• Define a favicon to show in search resultsGoogle Search Central
• Links - HTML StandardWHATWG
• icons - Web app manifestMDN Web Docs
• HTML attribute: relMDN Web Docs
• Configuring Web ApplicationsApple Developer
• Adaptive icon support in PWAs with maskable iconsweb.dev

继续了解