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

带角标Favicon生成 - 数字小红点提醒

12
0
0
0
拖拽图片到此处 或 点击上传 支持 PNG / JPG / SVG / GIF / ICO

留空=纯红点
超过 99 自动显示 "99+",留空显示无数字小红点
角标半径占图标边长的百分比
基于256px画布的像素偏移,正值向右/向下移动角标

推荐使用256×256 PNG作为现代favicon,支持透明背景
实时预览
256×256 画布

棋盘格背景表示透明区域,下载的PNG保留透明通道

常见问题与知识点
角标 Favicon 是在网站图标(Favicon)的右上角叠加一个数字红点提醒的设计元素。它常用于:
PWA 应用图标:显示未读消息数、待处理任务数
浏览器标签页:让用户在不切换标签时也能注意到新动态
书签图标:在收藏夹中突出显示需要关注的站点
通知类Web应用:邮件、社交、任务管理等场景
现代网站推荐使用多尺寸策略:
16×16:浏览器标签页、收藏夹默认尺寸
32×32:大多数浏览器标签页的高DPI显示
48×48 / 64×64:桌面快捷方式、Windows磁贴
128×128 / 256×256:PWA manifest图标、macOS Touch Bar
HTML中可同时声明多个尺寸:<link rel="icon" sizes="32x32" href="...">
PNG 格式在现代Web开发中已经完全替代了传统的ICO格式:
• 所有现代浏览器(Chrome、Firefox、Safari、Edge)均支持PNG作为favicon
• PNG支持完整的透明通道(Alpha),而ICO的透明支持有限
• PNG文件更小,加载更快
• 如需ICO格式,可下载PNG后使用在线转换工具(如convertio.co)转换
在16×16的极小尺寸下,数字细节会变得模糊,这是物理像素限制导致的。此时角标会呈现为一个隐约的小红点,仍能起到视觉提醒作用。如需清晰显示数字,建议使用32×32或更大的尺寸。PWA应用推荐使用192×192或256×256的图标。
Emoji图标功能适合快速原型设计。需要注意:
• Emoji在不同操作系统(macOS / Windows / iOS / Android)上渲染效果不同
• macOS的Apple Color Emoji渲染最为精美
• Canvas绘制Emoji在某些旧浏览器上可能显示为黑白
• 推荐使用通用性高的Emoji(如🔔💬📧⭐),避免过于新的Emoji
• 正式生产环境建议使用专业设计的图标图片