如何在Google Chrome浏览器中将网站快捷方式默认图标替换为自定义favicon

• 确认图标文件规格合规：优先准备32x32像素的ICO格式作为基础favicon，搭配192x192像素的PNG格式用于桌面快捷方式识别，避免使用非标准尺寸、破损的图标文件。
• 核对HTML头部link标签配置，推荐完整配置如下：

<!-- 基础favicon配置 -->
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<!-- 适配Chrome桌面快捷方式 -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png">

• 优先将所有favicon文件放在网站根目录，Chrome会默认优先请求根目录下的favicon.ico文件，即使未配置link标签也会尝试读取。
• 路径配置优先使用绝对路径，避免相对路径在多级子页面下无法正确加载。
• 清除Chrome缓存强制刷新：Chrome对favicon的缓存周期很长，普通刷新无法拉取最新图标，可按Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac）强制刷新，也可直接访问favicon的文件地址手动刷新后再回到站点。
• 测试时使用无痕模式访问，排除本地缓存、浏览器扩展的干扰。
• 若站点配置了PWA的manifest.json文件，需要同步在manifest中声明icons字段，示例配置：

{
  "icons": [
    {
      "src": "/favicon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

• 确认服务器返回favicon文件的响应头没有配置过长的缓存时间，避免浏览器长期读取旧的缓存文件。
• 已经添加到桌面的旧快捷方式不会自动更新图标，需要删除原有快捷方式后重新添加，新配置的图标才会生效。

内容的提问来源于stack exchange，提问作者Daniel Mikuláš