浏览器标签只有指甲盖大,复杂插画会糊成色点。作业展示站、社团主页、个人作品集只要有一个干净图标,辨识度就会好很多。
设计要点
图形尽量只有一两个形状,线条别太细。深色标签栏上要够亮,浅色背景上要够暗,或者加一个简单底色。
透明背景的 PNG 或 WebP 更灵活。不要把整张风景照塞进 favicon。
先在 16×16 预览里看能不能认出来。大图好看不代表缩小后还认得清。
常见尺寸
16×16、32×32 用于标签页;48×48 常见于部分桌面场景;180×180 常用于苹果触控图标。一张清晰的方形母图就可以批量生成。
用「Favicon 生成」从母图导出多尺寸,再按框架文档放到 public 目录或配置 metadata icons。
母图建议至少 512×512 的正方形,边缘留一点安全边,避免圆角遮罩裁掉关键部分。
改完图标如果还显示旧图,多半是缓存。可以强刷,或者换文件名、加查询参数。
文件在本地浏览器生成,不上传到后台服务器。导出后按你的项目结构放入静态资源目录即可。