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

角标Favicon生成器 - 带红点或数字的图标

10
0
0
0

角标 Favicon 生成器

上传图标或使用默认图标，添加红点通知角标或数字角标，实时预览并下载多种尺寸的 Favicon

实时预览

预览尺寸 256×256 px

16px
32px
64px
基础图标

拖拽图片到此处 或 点击上传

支持 PNG / JPG / SVG / WebP，建议正方形图片

角标设置
使用提示
  • Favicon 推荐使用 32×32 或 16×16 尺寸
  • Apple Touch Icon 建议 180×180
  • 对于极小尺寸（16px），红点角标效果最佳
  • 下载的 PNG 可直接用于 <link rel="icon">
  • 支持透明背景图标，角标将叠加其上
常见问题
什么是角标 Favicon？
角标 Favicon 是在网站图标（Favicon）的角落添加小标记（如红点、数字或文字）的图标。它常用于提示用户有未读消息、通知或更新，类似于手机 App 图标上的角标。这种视觉提示能有效吸引用户注意力，提升点击率。
如何在网页中使用带角标的 Favicon？
下载 PNG 文件后，将其上传到网站根目录，然后在 HTML 的 <head> 中添加：
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
你也可以使用 JavaScript 动态更换 Favicon，实现实时通知角标效果。
角标 Favicon 支持哪些尺寸？
本工具支持导出 16×16、32×32、48×48、64×64、128×128、256×256 以及 180×180（Apple Touch Icon）等多种尺寸。最常用的 Favicon 尺寸是 16×16 和 32×32，Apple 设备推荐使用 180×180。
为什么我的角标在 16×16 尺寸下看不清？
16×16 像素非常小，数字或文字角标在这种尺寸下可能难以辨认。建议在极小的 Favicon 尺寸中使用红点角标（纯圆点），它在小尺寸下依然清晰可见。数字角标更适合 32×32 及以上的尺寸。
PNG 格式的 Favicon 兼容性如何？
所有现代浏览器（Chrome、Firefox、Safari、Edge）都完美支持 PNG 格式的 Favicon。HTML5 规范也明确支持 PNG Favicon。对于极少数老旧浏览器，你可能需要 ICO 格式，可使用在线转换工具将 PNG 转为 ICO。
可以动态更新网页的角标 Favicon 吗？
可以！使用 JavaScript 动态修改 <link rel="icon"> 的 href 属性，或创建新的 link 元素替换旧的，即可实现实时更新 Favicon 角标。这在消息通知系统中非常实用——有新消息时显示带数字角标的 Favicon，阅读后恢复普通图标。
角标数字最多显示多少？
本工具默认在数字超过 99 时自动显示为"99+"，这是业界常见的处理方式（如微信、邮件等应用）。你当然也可以手动输入任意 1-4 个字符的内容，如"NEW"、"热"等自定义文字角标。
🔧 相关工具