移动主屏幕图标尺寸：2026 年完整指南

你把常用的 Web App 添加到 iPhone 主屏幕，期待看到自己精心设计的 logo。结果呢？屏幕上出现的是整页的微小截图——糊得几乎认不出来。这个锅不该你的设计来背，问题出在你提供的 favicon 尺寸，根本不符合移动端主屏幕的要求。

移动操作系统会把你的网站当成「已安装的应用」来处理。这意味着它需要一张高分辨率的正方形图标，能从小型缩略图一路放大到大型启动器都不糊。

「移动端主屏幕图标」到底指什么

Favicon（浏览器标签页那个小图标）一般是 16x16 或 32x32 像素，跟移动端主屏幕图标完全是两回事。浏览器标签页图标挤在窄长的矩形里，旁边还并排着七个标签；主屏幕图标则摆在 60–120 像素的网格里，常常还要被系统加上圆角、阴影和各种形状遮罩。

当用户在 Safari 里点「添加到主屏幕」，或者在 Chrome 里点「安装应用」时，操作系统会去 HTML 里找特定的声明。如果找不到合适的尺寸，iOS 会直接拿一张页面截图来顶替，Android 则退回标准 favicon。两种效果都不好看。

为什么传统 Favicon 尺寸在这里会失效

大多数开发者学到的经验是：一个 32x32 的 ICO 文件「够用了」。这个尺寸在浏览器标签、书签栏、地址栏里确实没问题。但一旦 iOS 需要主屏幕图标，它要的是尺寸大得多的 Apple Touch Icon。

32x32 的 ICO 虽然也是正方形，但像素密度根本撑不起 Retina 主屏幕。iOS 把它强行放大，结果就是用户口中那种「没做完整」的 Web App 的样子——糊成一团。

两大移动生态，两套尺寸规则

移动端主屏幕的需求分成两派，各自有各自的规范。

iOS：Apple Touch Icon

Apple 的官方做法是去 HTML 里找 <link rel='apple-touch-icon'> 标签，指向一张正方形的 PNG。在现代 iOS（iOS 8+）里，180x180 已经被视作 iPhone 主屏幕的事实标准。再小的话，iOS 要么直接拒绝，要么强行放大，画质损失肉眼可见。

iPad 历史上需要多个尺寸。但今天你只发一张 180x180 的 PNG 就能覆盖大部分现役设备——因为 iOS 把更大的图片往下缩时效果依然平滑，所以 apple touch icon 180x180 这个策略是站得住脚的。

Android：Web App Manifest

Android 这边走的是 W3C 定义的 Web App Manifest。根据 Web App Manifest 规范，icons 字段接收一个图片对象数组，每一项都要显式写明 sizes、type 和 purpose。

Android 几乎必定会要的两个尺寸：

192x192——用于主屏幕启动器和大部分应用抽屉
512x512——用于启动闪屏，以及把 PWA 上架 Play Store 时需要的素材

如果你还想要一个 'purpose': 'maskable' 图标，能在 Android 的自适应形状（圆形、圆角矩形、圆角正方形）下都正常显示，那就需要一张预留了安全区的 512x512 PNG。

最精简的移动端主屏幕配置

180x180 PNG——Apple Touch Icon（覆盖 iPhone 和 iPad）
192x192 PNG——Android 主屏幕启动器
512x512 PNG——Android 闪屏、Play Store、maskable 变体
SVG favicon——可选，用于浏览器标签和深色模式适配
32x32 ICO——给老版本桌面浏览器兜底

HTML 实现

下面是一套最小可用的配置，放到你的 <head> 里就行：

&lt;link rel='apple-touch-icon' href='/icons/apple-touch-icon-180.png' sizes='180x180'&gt;
&lt;link rel='icon' type='image/svg+xml' href='/icons/favicon.svg'&gt;
&lt;link rel='icon' type='image/png' href='/icons/favicon-96.png' sizes='96x96'&gt;
&lt;link rel='manifest' href='/site.webmanifest'&gt;

你的 site.webmanifest 需要声明两个 Android 尺寸：

{
  'icons': [
    { 'src': '/icons/icon-192.png', 'sizes': '192x192', 'type': 'image/png' },
    { 'src': '/icons/icon-512.png', 'sizes': '512x512', 'type': 'image/png' },
    { 'src': '/icons/icon-maskable.png', 'sizes': '512x512', 'type': 'image/png', 'purpose': 'maskable' }
  ]
}

rel='icon' 这个写法遵循的是 HTML 现行标准，所以我们用的是 type 和 sizes 属性，而不是那些过时的格式。

最佳实践

从 512x512 开始设计。先做最大尺寸，再干净地缩到 180、192、96。
用 PNG，不要用 JPEG。主屏幕图标需要透明背景，才能配合系统的形状遮罩。JPEG 强制实底，扛不住。
别再写 precomposed 了。apple-touch-icon-precomposed 已经过时——iOS 早就不再做那种亮面渲染了。
验证 manifest。sizes 里拼错一个字符，Android 主屏幕安装就会静默失败。用 Chrome DevTools 的 Application 面板核对一下。
积极地刷缓存。移动系统对主屏幕图标的缓存能挂上好几周。给 URL 加版本号（比如 ?v=2），可以强制刷新。

想看某个站点当前实际下发的是什么，可以参考全浏览器 favicon 测试工具这篇，里面有完整的 DevTools 验证流程。如果想一次性生成上面这五份文件，Mzu favicondl 可以一键导出。

移动端主屏幕 favicon 尺寸这件事，重点从来不是堆几十张图。而是把三到四张对的 PNG 发出去，在 HTML 和 manifest 里正确声明，再确认系统真的能找到它们。