App 图标：它与 Favicon 有何不同
App 图标是代表主屏幕、启动器、程序坞或应用切换器上已安装应用的图像，与之相对的 favicon 则代表浏览器内部的网站。在 Web 上，同一套图形同时服务于两者：iOS 从 apple-touch-icon link 标签取 app 图标，而 Android 和桌面 PWA 从 web app manifest 里的 icons 数组取它。每个平台都会把它裁剪并遮罩成自己的形状，所以图形必须画得能挺过这道处理。
同一套图形，不同的任务
favicon 生活在浏览器界面里，在 16 到 32 像素之间，紧挨着承载了大部分含义的页面标题。app 图标生活在主屏幕上，尺寸 100 像素或更大，独自一个，旁边还有十几个竞争者，而它是唯一标识你的东西。它得到更多空间，也受到更多审视。
实际的区别在于平台从哪里读取它、以及之后对它做了什么。浏览器按你提供的样子绘制 favicon。操作系统会把 app 图标裁剪成一个形状、加上阴影，有时还会为其着色或调暗，所以一个延伸到画布边缘的标志会被裁掉。
每个平台从哪里读取 app 图标
| 平台 | 来源 | 要发布的尺寸 |
|---|---|---|
| iOS / iPadOS | link rel="apple-touch-icon" | 180x180 PNG，不透明 |
| Android | Manifest icons 数组 | 192x192 和 512x512 PNG |
| Desktop PWA | Manifest icons 数组 | 512x512 PNG |
| Android launcher shape mask | 带 purpose maskable 的 manifest 条目 | 512x512 PNG，80% 安全区 |
| Windows shortcut | favicon.ico | 48x48 条目 |
真正要紧的两条声明
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">iOS 读第一条，Android 和桌面 PWA 读第二条所引用文件里的 icons 数组。两者合起来覆盖每一个已安装应用的位置。
App 图标常见问题
我需要为 app 图标和 favicon 准备两套不同的图形吗？
通常不需要两套图形，但往往需要两种不同的处理。app 图标想要一个填充的背景和充裕的内边距；favicon 则想要标志尽可能大而简单。同一个 logo，两种导出。
为什么我的主屏幕图标看起来像一张截图？
当 iOS 在站点根目录既找不到 apple-touch-icon link、也找不到 /apple-touch-icon.png 时，就会回退到页面的一张截图。加上其中任一个就能解决，不过在重新添加快捷方式之前，旧图标可能仍然残留。
源图形应该是多大？
1024x1024 或更大，方形，不要把圆角烘焙进去。每个平台尺寸都能从它干净地向下缩放，而各平台会应用它们各自的圆角形状。