如何让浏览器标签页显示方形favicon，谷歌搜索结果显示圆形？

可以实现这个需求，核心是利用图标用途区分（purpose属性）让不同场景加载对应图标：谷歌搜索结果优先用适配圆形的maskable图标，浏览器标签页用普通方形图标。

一、核心原理 #

• 谷歌搜索结果、PWA安装等场景会优先选择purpose="maskable"的图标，这类图标需要提前适配圆形蒙版（内容放在圆形安全区内），避免平台强制裁剪。
• 浏览器标签页默认优先加载purpose="any"的普通图标，保持方形显示效果。

二、具体修改步骤 #

1. 准备两套图标

• 保留你现有的方形无蒙版图标（16.png、32.png等），用于浏览器标签页。
• 确保你的maskable_icon_x*.png是预适配圆形的：内容集中在图标中心的圆形安全区（比如96x96的图标，内容放在中心72x72的圆内），这样谷歌搜索会直接显示完整圆形，不会出现方套圆的尴尬效果。

2. 调整HTML的Link标签

修改现有meta标签，明确区分两类图标的用途：

<!-- 普通方形图标，用于浏览器标签页 -->
<link rel="icon" type="image/png" href="media/favicon/16.png" sizes="16x16" purpose="any">
<link rel="icon" type="image/png" href="media/favicon/32.png" sizes="32x32" purpose="any">
<link rel="icon" type="image/png" href="media/favicon/48.png" sizes="48x48" purpose="any">
<link rel="icon" type="image/png" href="media/favicon/96.png" sizes="96x96" purpose="any">
<link rel="icon" type="image/png" href="media/favicon/180.png" sizes="180x180" purpose="any">
<link rel="icon" type="image/png" href="media/favicon/512.png" sizes="512x512" purpose="any">

<!-- Maskable圆形图标，用于谷歌搜索、PWA等场景 -->
<link rel="icon" type="image/png" href="media/favicon/maskable_icon_x96.png" sizes="96x96" purpose="maskable">
<link rel="icon" type="image/png" href="media/favicon/maskable_icon_x128.png" sizes="128x128" purpose="maskable">
<link rel="icon" type="image/png" href="media/favicon/maskable_icon_x512.png" sizes="512x512" purpose="maskable">

<!-- 换回方形图标作为shortcut icon，避免浏览器误加载maskable图标 -->
<link rel="shortcut icon" type="image/png" href="media/favicon/32.png">
<!-- 苹果触摸图标保留maskable适配，符合苹果设备的圆形显示逻辑 -->
<link rel="apple-touch-icon" href="media/favicon/maskable_icon_x128.png">

3. 更新manifest.json配置

明确标注图标的用途，让谷歌和浏览器能正确识别：

"icons": [
  // Maskable圆形图标，优先提供给谷歌搜索等需要蒙版的场景
  {
    "src": "media/favicon/maskable_icon_x96.png",
    "sizes": "96x96",
    "type": "image/png",
    "purpose": "maskable"
  },
  {
    "src": "media/favicon/maskable_icon_x128.png",
    "sizes": "128x128",
    "type": "image/png",
    "purpose": "maskable"
  },
  {
    "src": "media/favicon/maskable_icon_x512.png",
    "sizes": "512x512",
    "type": "image/png",
    "purpose": "maskable"
  },
  // 普通方形图标，供浏览器标签页使用
  {
    "src": "media/favicon/16.png",
    "sizes": "16x16",
    "type": "image/png",
    "purpose": "any"
  },
  {
    "src": "media/favicon/32.png",
    "sizes": "32x32",
    "type": "image/png",
    "purpose": "any"
  },
  {
    "src": "media/favicon/180.png",
    "sizes": "180x180",
    "type": "image/png",
    "purpose": "any"
  },
  {
    "src": "media/favicon/512.png",
    "sizes": "512x512",
    "type": "image/png",
    "purpose": "any"
  }
]

三、后续操作 #

1. 清除浏览器本地缓存，测试标签页图标是否正常显示方形。
2. 登录谷歌搜索控制台，提交网站重新抓取，让谷歌更新图标缓存（这个过程可能需要1-3天）。

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