App Icon 与 Favicon：有什么区别？
它们看起来相似，却服务于不同目的。这里讲清楚何时用哪一个，以及它们如何协同工作。
并排对比
| 方面 | Favicon | App icon |
|---|---|---|
| 主要用途 | 浏览器标签页、书签、搜索结果 | 主屏幕、应用切换器、应用商店 |
| 用户在哪里看到它 | 桌面浏览器、移动浏览器 | iOS 主屏幕、Android 启动器 |
| 典型尺寸 | 16x16, 32x32, 96x96px | 180x180, 192x192, 512x512px |
| 文件格式 | ICO、PNG、SVG | PNG（通常为 maskable） |
| 定义位置 | HTML <link> 标签 | manifest.json |
| 何种情况必需 | 所有网站 | PWA、可安装的 Web 应用 |
各自是什么
favicon（“favorite icon”的缩写）是出现在浏览器标签页、书签、浏览历史和搜索引擎结果中的小图标。它是你网站在浏览器中的视觉标识。
app icon 是更大的图标，当用户将你的 Web 应用作为渐进式 Web 应用（PWA）安装时，它会出现在用户的主屏幕上。它把你的应用呈现为一个独立的应用程序。
各自出现在哪里
Favicon
Start here每个网站都需要一个，无论是不是 PWA
- 浏览器标签页标识
- 书签中的视觉识别
- 搜索结果中的品牌标识
- 浏览历史图标
- 桌面快捷方式（Windows）
- 在 HTML 中声明：<link rel="icon" href="/favicon.ico">
App icon
只有在有人安装应用后才会出现
- 主屏幕启动器
- 应用切换器 / 多任务
- 通知角标
- 应用商店列表
- 启动画面品牌标识
- 在 manifest.json 中声明："icons": [{"sizes": "192x192"}]
Favicon 尺寸与 app icon 尺寸并排
1. 尺寸要求
favicon 通常很小（16x16 到 96x96px），因为它们出现在浏览器标签页这类紧凑空间里。它们需要在极小的尺寸下依然可辨识。
app icon 大得多（180x180 到 512x512px），因为它们会在主屏幕上醒目地显示。它们可以包含更多细节，并且常常为不同的设备形状设计 maskable 变体。
2. 使用场景
favicon 在浏览时始终可见：它们是浏览器界面的一部分。用户在标签页和网站之间切换时会不断看到它们。
app icon 只在安装后才出现。它们把你的应用呈现为一个独立实体，与浏览器分离。用户点击它们，以全屏模式启动你的应用。
3. 技术实现
favicon 通过文档 head 中的 <link> 标签在 HTML 里声明。可以为不同场景指定多种尺寸。
app icon 在 manifest.json 中定义，而 manifest.json 由 HTML 引用。manifest 还包含其他 PWA 元数据，例如应用名称、主题色和显示模式。
两个都需要吗？
是的，你应该两个都有。原因如下。
favicon 对所有网站都必不可少：它们提升品牌在浏览器标签页和搜索结果中的辨识度。
如果你希望用户将你的网站安装为 PWA，那么 app icon 是必需的。没有它们，安装提示不会出现，主屏幕体验也会很糟糕。
它们可以共用同一套设计，但应针对各自的尺寸和场景进行优化。
Favicon 设计技巧
让设计保持简单：细节在 16px 下会丢失。
使用高对比度以提升可见性。
在多种尺寸下测试（16x16、32x32、96x96）。
考虑使用 SVG 以获得清晰缩放。
确保它在浅色和深色背景上都能正常显示。
App icon 设计技巧
至少按 192x192px 设计（推荐 512x512px）。
为 Android 创建 maskable 变体。
确保安全区（内部 80%）包含关键元素。
使用与 favicon 一致的品牌标识。
在真实设备上测试以获得最佳结果。