如何为网站的书签图标添加徽章？

核心区分：普通网页 vs PWA应用 #

浏览器书签图标本身属于浏览器本地资源，网页没有直接权限修改。你看到的WhatsApp Web、Reddit这类站点的图标标记，本质是它们支持PWA（渐进式Web应用），用户将其安装为桌面/移动PWA后，才能通过标准API控制图标角标。

1. PWA应用：标准方案（推荐） #

使用Web App Manifest + Badge API是当前主流浏览器支持的标准实现方式：

• 首先确保你的应用满足PWA安装条件：
  • 配置manifest.json，指定应用名称、启动图标、显示模式等核心字段。
  • 注册Service Worker，保证应用可以离线运行。
• 调用navigator.setAppBadge() API控制角标：

  // 设置具体消息数量
  navigator.setAppBadge(3);
  // 清除角标
  navigator.clearAppBadge();
  // 只显示红点（无数字提示）
  navigator.setAppBadge();
  

• 注意事项：
  • 仅支持HTTPS环境或本地开发环境（localhost）。
  • 需要用户同意将网站安装为PWA，部分浏览器可能额外要求通知权限。
  • 兼容性：Chrome 81+、Edge 81+、Firefox 111+、Safari 16.4+，可通过'setAppBadge' in navigator做兼容性检测。

2. 普通网页：无法直接修改书签图标，只能做模拟提示 #

如果你的站点不是PWA，无法直接控制浏览器书签图标。可以通过以下方式给用户提供类似的通知体验：

• 引导用户将网页添加为PWA，转化为上述场景。
• 在页面内添加固定的视觉提示（比如页面右上角的悬浮红点/数字标记），但这种提示仅在打开页面时可见，无法同步到书签图标。

3. 浏览器扩展：全局书签标记方案 #

如果是开发浏览器扩展，可以通过浏览器提供的扩展API实现书签图标自定义标记：

• 利用Chrome/Edge的bookmarks API获取和管理书签。
• 通过扩展的样式注入能力，给特定书签添加角标或红点样式。
• 这种方式属于扩展层面的功能，需要用户安装你的扩展，并非网页自身能实现。

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