无需登录 数据私有 本地保存

动态角标 Favicon 生成 - 数字气泡提醒

12
0
0
0
图标设置
图标内容（Emoji 或 1-2个字符）
背景形状
背景颜色
#4F46E5
角标设置
角标类型
角标数字 5
超过 99 自动显示 "99+"
角标位置
角标颜色
#EF4444
角标文字颜色
#FFFFFF
实时预览
favicon 我的网站 - 消息通知
↑ 浏览器标签页效果模拟
16×16
32×32
64×64
128×128
下载 Favicon

选择尺寸下载 PNG 格式，可直接用作网站图标。

JavaScript 动态更新代码

将生成的 Favicon 作为基础，用以下代码动态更新角标数字：

// 动态更新 Favicon 角标 function updateFaviconBadge(count) { const canvas = document.createElement('canvas'); canvas.width = 32; canvas.height = 32; const ctx = canvas.getContext('2d'); // 绘制主背景 ctx.fillStyle = '#4F46E5'; ctx.beginPath(); ctx.roundRect(2, 2, 28, 28, 6); ctx.fill(); // 绘制图标文字 ctx.fillStyle = '#fff'; ctx.font = 'bold 16px sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText('🔔', 16, 16); // 绘制角标 if (count > 0) { const badgeX = 24, badgeY = 8, badgeR = 9; ctx.fillStyle = '#EF4444'; ctx.beginPath(); ctx.arc(badgeX, badgeY, badgeR, 0, Math.PI * 2); ctx.fill(); const label = count > 99 ? '99+' : String(count); ctx.fillStyle = '#FFFFFF'; ctx.font = 'bold 8px sans-serif'; ctx.fillText(label, badgeX, badgeY); } // 更新 favicon const link = document.querySelector("link[rel='icon']") || document.createElement('link'); link.rel = 'icon'; link.href = canvas.toDataURL('image/png'); document.head.appendChild(link); } // 使用示例：显示5条未读消息 updateFaviconBadge(5);
提示：代码中的颜色和参数会随您的配置自动更新。
常见问题与相关知识
什么是 Favicon 角标（Badge）？它有什么作用？
Favicon 角标是在网站图标（Favicon）上叠加的数字或红点标记，通常用于提示用户有未读消息、通知或待处理事项。它能让用户在浏览器标签页上直接看到提醒，即使没有切换到该标签页也不会错过重要信息。常见于 Gmail、WhatsApp Web、Slack 等应用。
如何将生成的 Favicon 安装到我的网站？
下载 PNG 文件后，将其放置在网站根目录，然后在 HTML 的 <head> 中添加：
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
建议同时提供 16×16 和 32×32 两个尺寸，以兼容不同浏览器和设备。
角标数字最大能显示多少？超过 99 怎么办？
在 32×32 及更大尺寸的 Favicon 中，角标数字可以清晰显示 0-99。当数字超过 99 时，会自动显示为 "99+"，这是业界通用的做法（如微信、Slack 等）。对于 16×16 的小尺寸，建议使用红点角标而非数字，因为数字在 16px 下几乎无法辨认。
如何用 JavaScript 动态更新 Favicon 角标数字？
使用 Canvas API 动态绘制 Favicon，然后通过修改 <link rel="icon"> 的 href 属性来更新。核心步骤：① 创建 Canvas ② 绘制背景、图标和角标 ③ 使用 canvas.toDataURL() 生成 PNG 数据 ④ 更新 link 标签的 href。上方的代码示例展示了一个完整的 updateFaviconBadge() 函数，可以直接使用。
所有浏览器都支持动态 Favicon 吗？
是的，所有现代浏览器（Chrome、Firefox、Safari、Edge）都支持通过 JavaScript 动态修改 Favicon。移动端浏览器同样支持。需要注意的是，部分浏览器对 SVG 格式的 Favicon 支持有限，推荐使用 PNG 格式以确保最佳兼容性。
Favicon 应该使用什么尺寸？不同尺寸有什么区别？
16×16：最基础的 Favicon 尺寸，在所有浏览器标签页中显示。
32×32：高DPI屏幕上的标签页图标，推荐作为默认尺寸。
64×64：书签栏、快捷方式等场景。
128×128 及以上：适用于桌面快捷方式、Windows 磁贴等。建议至少提供 16×16 和 32×32 两个尺寸。
角标应该放在 Favicon 的哪个位置？
绝大多数应用将角标放在右上角（如 Gmail、WhatsApp），这是用户最习惯的位置。左上角也比较常见。右下角和左下角使用较少，但可以根据图标的设计灵活选择。本工具支持四个角的位置，您可以预览不同位置的效果。
动态更新 Favicon 会影响页面性能吗？
影响极小。Canvas 绘制和 toDataURL 操作都在毫秒级完成，不会阻塞页面渲染。建议使用防抖（debounce）策略，避免在短时间内频繁更新（例如限制每秒最多更新 2-3 次）。如果只需要红点提示，可以使用两张静态图片切换，性能更优。
有没有现成的库可以简化动态 Favicon 的实现？
有，例如 favico.js 是一个轻量级的开源库，专门用于在 Favicon 上显示角标。但自己用 Canvas 实现更灵活，可以完全自定义样式，且不需要额外依赖。本工具生成的代码片段就是一个完整的自实现方案。
Favicon 角标的最佳实践有哪些？
① 角标颜色使用醒目的红色或橙色，与大多数应用的 notification badge 保持一致；② 数字超过 99 显示 "99+"，避免角标过大；③ 在 16×16 尺寸下使用纯色圆点而非数字；④ 当通知数为 0 时移除角标，保持图标干净；⑤ 确保角标与主图标有足够的对比度。
🔧 相关工具