安卓Chrome浏览器添加至主屏幕时如何设置自定义图标？

当前安卓Chrome对非PWA网页的「添加至主屏幕」图标规则已更新，仅用旧版的apple-touch-icon或单一尺寸图标标签无法生效。以下是经验证的有效配置方案：

核心配置代码 #

需提供多尺寸PNG图标，并通过明确的<link>标签声明，示例如下：

<!-- 适配浏览器标签栏的小尺寸图标 -->
<link rel="icon" href="assets/icons/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="icon" href="assets/icons/favicon-32x32.png" sizes="32x32" type="image/png">
<!-- 安卓主屏幕专用大尺寸图标（必须包含） -->
<link rel="icon" href="assets/icons/homescreen-192x192.png" sizes="192x192" type="image/png">
<link rel="icon" href="assets/icons/homescreen-512x512.png" sizes="512x512" type="image/png">
<!-- 可选：兼容苹果设备，安卓Chrome也可识别 -->
<link rel="apple-touch-icon" href="assets/icons/homescreen-180x180.png" sizes="180x180">

关键注意事项 #

• 图标格式优先选PNG，SVG在部分Chrome版本中支持不稳定
• 必须包含192x192和512x512尺寸的图标，这是安卓Chrome主屏幕图标的核心适配规格
• 确保图标路径正确（绝对/相对路径均可），可通过浏览器开发者工具的Network面板检查资源是否正常加载
• 不要仅依赖shortcut icon标签，需明确指定sizes属性让Chrome匹配对应尺寸
• 避免触发PWA安装提示：不要配置manifest.json（或配置后不满足PWA条件，如未注册Service Worker），否则Chrome会显示「安装应用」而非「添加至主屏幕」

验证与排障 #

配置完成后，在安卓Chrome中打开网页，选择「添加至主屏幕」查看预览：

• 若仍显示默认字母图标，先清除Chrome缓存后重试
• 检查图标文件是否损坏、路径是否错误
• 确保图标背景为纯色或透明，复杂背景可能被Chrome自动替换为默认图标

注：目前已知纽约时报Connections游戏页面、商业内幕网（businessinsider.com）均通过此方式实现自定义主屏幕图标，无需启用PWA。

内容的提问来源于stack exchange，提问作者user984003