你有没有试过在 iPhone 上点击“分享”，然后选择“添加到主屏幕”，本以为会看到一个精美的 App 图标，结果却得到了一个缩微版、根本看不清的网页截图？我在很多生产环境的项目中经常看到这个问题。你的桌面端标签页图标可能看起来很完美，但你的移动端“添加到主屏幕”图标（add to home screen icon favicon）设置很可能是不完整的。
看看 Stripe 或 GitHub。当你把他们的 Web 应用保存到手机上时，主屏幕上的图标看起来和从 App Store 下载的原生应用一模一样。他们绝不会把这事交给浏览器去随机应变，而是明确定义了操作系统应该显示什么。
移动端浏览器其实非常“偷懒”。如果你不明确告诉 iOS Safari 或 Android Chrome 在创建主屏幕快捷方式时该用哪张图片，它们就会乱来。Safari 会直接给你的网页截个图。Chrome 则会试图把你那个可怜的 32x32 桌面端 favicon 强行拉伸成 192x192 的大方块。这两种结果都惨不忍睹，直接拉低了你的品牌专业度。
完美主屏幕图标的 3 步设置法
你不需要写一大堆过时的 HTML 标签来解决这个问题。在 2026 年，我们只需要搞定两大阵营：Apple (iOS) 和 Google (Android)。以下是具体做法。
第 1 步：创建 Apple Touch Icon (iOS)
Apple 固执地无视了标准的 Web Manifest 主屏幕图标规范。你必须专门给 Safari 喂一个特定的 link 标签。这张图片必须是 180x180 像素的 PNG。
（千万别在这里用透明背景——iOS 会把透明区域自动填充为纯黑色，让你的 Logo 看起来像个黑洞。一定要使用纯色背景）。
<link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'>把这行代码放在你的 <head> 里。想深入了解 iOS 的各种奇葩设定，可以看看我们的 Apple Touch Icon 设置指南。
第 2 步：配置 Web Manifest (Android)
Android 设备会寻找 site.webmanifest 文件。这个 JSON 文件告诉 Chrome，当你的网站被保存到主屏幕时应该如何表现，包括使用哪个图标，以及是否隐藏浏览器 UI。
在你的根目录下创建一个名为 site.webmanifest 的文件，并添加以下代码：
{
"name": "你的应用名称",
"short_name": "应用",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}注意 display: standalone 这个属性。这就是那个能让用户从主屏幕打开你的网站时隐藏 URL 地址栏的魔法代码，让它拥有原生 App 的体验。
第 3 步：在 HTML 中链接 Manifest
你需要让 HTML 文档指向那个 manifest 文件。把它加在 Apple touch icon 标签的下面：
<link rel='manifest' href='/site.webmanifest'>需要避免的常见坑
即使是资深开发者也经常在这里翻车。以下是我每周都会看到的错误：
- 在 iOS 上使用 SVG： Safari 至今仍未完全支持将 SVG 用作主屏幕图标。老老实实用 PNG 吧。阅读我们的 SVG favicon 指南 看看 SVG 真正该用在哪（提示：桌面端标签页）。
- 忘记设置背景色： 如前所述，iOS 讨厌透明度。用你的品牌色填满 PNG 的背景。
- 缓存噩梦： 如果你更新了图标，iOS 会死死抱住旧图标不放。在 HTML 的文件路径后面加上版本查询字符串（比如
?v=2）来强制更新。
测试你的配置
别太相信桌面浏览器的开发者工具。测试“添加到主屏幕”图标的唯一真实方法是在真机上操作。
在 iPhone 上打开你的网站，点击分享按钮，选择“添加到主屏幕”。看看预览图标。如果是你那张清晰的 180x180 PNG，恭喜你搞定了。在 Android 设备上使用 Chrome 菜单做同样的操作。如果图标看起来有像素颗粒感，回去检查你的 manifest 路径。
别把这个过程搞得太复杂。在 2026 年，你只需要三个文件：一个标准的桌面图标，一个 180px 的 Apple Touch Icon，以及一个包含 Android 图标的 manifest。如果你需要从一张高清 Logo 中一次性生成这些确切的文件，把它扔进 Mzu favicondl，然后把输出的文件丢进你的根目录即可，它会自动处理好所有尺寸和格式。