站点 Favicon 尺寸和清晰度

2026-08-07 · 约 7 分钟

浏览器标签只有指甲盖大,复杂插画会糊成色点。作业展示站、社团主页、个人作品集只要有一个干净图标,辨识度就会好很多。

设计要点

图形尽量只有一两个形状,线条别太细。深色标签栏上要够亮,浅色背景上要够暗,或者加一个简单底色。

透明背景的 PNG 或 WebP 更灵活。不要把整张风景照塞进 favicon。

先在 16×16 预览里看能不能认出来。大图好看不代表缩小后还认得清。

常见尺寸

16×16、32×32 用于标签页;48×48 常见于部分桌面场景;180×180 常用于苹果触控图标。一张清晰的方形母图就可以批量生成。

用「Favicon 生成」从母图导出多尺寸,再按框架文档放到 public 目录或配置 metadata icons。

母图建议至少 512×512 的正方形,边缘留一点安全边,避免圆角遮罩裁掉关键部分。

改完图标如果还显示旧图,多半是缓存。可以强刷,或者换文件名、加查询参数。

文件在本地浏览器生成,不上传到后台服务器。导出后按你的项目结构放入静态资源目录即可。

返回指南列表