如何根据日期动态设置不同网页标题图标，实现类似WhatsApp Web的数字角标效果？

核心实现逻辑是通过Canvas动态绘制带日期数字的图标，替换页面原有的favicon链接即可，完全可以纯前端实现，无需后端预生成资源，以下是两种常见可行方案：

方案1：原生Canvas实现（无依赖，自由度高，推荐） #

无需引入外部资源，完全自己控制图标样式，可实现自定义底图、自定义数字位置、字体等效果，示例代码如下：

1. 先在HTML的head标签中预留favicon链接标签，方便后续操作：

<link rel="icon" id="dynamic-favicon" href="/default-favicon.png">

2. 编写动态生成favicon的JS逻辑：

function updateFaviconWithDate() {
  // 获取当日日期数字
  const currentDate = new Date().getDate();
  // 创建Canvas画布，用64*64尺寸兼容性最佳
  const canvas = document.createElement('canvas');
  canvas.width = 64;
  canvas.height = 64;
  const ctx = canvas.getContext('2d');

  // 1. 绘制favicon底图（如果要沿用原有图标，可替换为Image加载原有图标后drawImage绘制）
  ctx.fillStyle = '#1677ff'; // 可替换为你应用的主题色
  ctx.fillRect(0, 0, 64, 64);

  // 2. 绘制日期数字，也可以调整位置到右上角做成角标效果
  ctx.fillStyle = '#ffffff';
  ctx.font = 'bold 36px system-ui, sans-serif';
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  // 居中绘制日期，要做角标的话把坐标调整到右上角，再加个红色圆形背景即可
  ctx.fillText(currentDate, 32, 32);

  // 3. 替换页面的favicon
  const faviconEl = document.getElementById('dynamic-favicon');
  faviconEl.href = canvas.toDataURL('image/png');
}

// 页面加载完成后触发更新
window.addEventListener('load', updateFaviconWithDate);

// 可选：添加定时器，每天零点自动更新日期
setInterval(() => {
  const now = new Date();
  if (now.getHours() === 0 && now.getMinutes() === 0 && now.getSeconds() === 0) {
    updateFaviconWithDate();
  }
}, 1000);

方案2：轻量库快速实现（适合快速开发） #

如果不需要高度自定义，可使用专门处理动态favicon的轻量库favico.js，几行代码即可实现类似WhatsApp的角标效果，示例代码：

// 初始化实例，可配置角标样式、动画效果
const favicon = new Favico({
  animation: 'none',
  type: 'circle'
});
// 直接传入当日日期，库会自动在原有favicon上叠加角标数字
favicon.badge(new Date().getDate());

注意事项 #

• 若使用自定义的favicon底图，需要确保图片资源和页面同域，或配置了跨域许可，否则Canvas转DataURL时会触发跨域报错
• 针对10-31的两位数日期，可以适当调小字体大小，避免数字溢出显示不全
• 部分浏览器对favicon的更新有缓存策略，若更新不生效可给favicon的href加个随机参数规避缓存

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