主题
ICO 图标生成
做完网站,浏览器标签页上还是一个空白文档图标。你把 logo 存成 favicon.png 丢到根目录,发现有的浏览器显示、有的不显示,桌面快捷方式又是另一个样子。

打开「ICO 图标生成」看到的初始界面。在服务器端处理,免费。
favicon 不是「一张图缩小」
浏览器标签页、书签栏、桌面快捷方式、各系统的磁贴,需要的尺寸各不相同。而16×16 那一档必须单独对待——把一个复杂 logo 直接缩到 16 像素,出来的是一团糊。
ICO 格式的设计正是为此:一个文件里打包多个尺寸,浏览器按场景取用最合适的那个。
所以做站点图标应该生成一整套,而不是丢一张 PNG 改个扩展名。
两种尺寸预设
网站图标——生成 favicon 常用的一组尺寸,覆盖标签页到桌面快捷方式。
应用图标——按桌面应用的规格生成更大的尺寸。
选「网站图标」是多数场景的答案。
圆角裁切
默认关闭。开启后会把方形图标裁成圆角。
什么时候开:源图是方形满幅设计(比如纯色底 + 居中图形),想要现代应用图标那种圆角效果。
什么时候别开:源图本身已经是圆形或不规则形状的 logo,再裁圆角会切掉边缘。
源图怎么准备
用方形的图。 非方形会被裁切或留白,结果不可控。
内容不要顶边。 四周留出约 10% 的空白,否则缩小后图形会顶到边缘显得局促,圆角裁切时还可能被切掉。
简化设计。 16×16 只有 256 个像素。文字基本不可能看清,细笔画会消失。理想的 favicon 是一个能在极小尺寸下辨认的剪影——测试方法:把图缩到 40 像素看还认不认得出。
优先用 SVG 源。 矢量源在各尺寸下都是重新渲染的,比从位图缩放清晰。
怎么用
生成后放到网站根目录,并在 HTML 里声明:
html
<link rel="icon" href="/favicon.ico">浏览器也会自动尝试根目录的 /favicon.ico,但显式声明更可靠。