什么是 Favicon？
一篇讲清网站图标是什么、用来做什么，以及它如何加强品牌和浏览体验的指南。也适合想自己做网站图标的人。
Favicon 是什么
Favicon 是 favorite icon 的缩写，是代表网站或页面的小图标。它会出现在浏览器和设备的多个位置，最常见的是标签页标题旁边，也出现在书签、浏览记录，以及把网站加到手机主屏幕时的快捷方式图标。
网站图标一般是正方形，常见 16×16、32×32 或 48×48 像素；现在也常用到 512×512，以适配高分辨率屏幕和手机。
会出现在哪里
网站图标会出现在多个地方，帮用户认出并找到你的站点：
- 浏览器标签： 最显眼的位置，出现在浏览器标签页标题旁边
- 书签： 出现在书签列表里，书签名称旁边
- 浏览记录： 出现在浏览记录菜单里
- 地址栏： 部分浏览器会在地址栏显示
- 手机主屏幕： 用户把网站加到主屏幕时，它会当作应用图标
- 搜索结果： 部分搜索引擎会在结果旁显示网站图标
示例：标签页和书签里的网站图标
为什么重要
网站图标对品牌和浏览体验都很关键：
品牌辨识
设计得当的图标能让用户在一堆打开的标签里立刻认出你的站点，强化品牌，也更好记。
看起来更完整
自定义图标会让网站显得更认真。没有它时，浏览器会显示通用图标，站点会看起来没做完。
更好找
在书签、记录和多个标签之间，图标能帮用户更快找到你的站点。经常访问的人尤其明显。
手机体验
在手机上，把网站加到主屏幕时，图标会当作应用图标。清晰可辨的图标会让体验更好。
格式和尺寸
现代网站应提供多种格式和尺寸，才能在各类浏览器和设备上正常显示：
ICO 格式
传统的 favicon.ico，常见 16×16 或 32×32。兼容性最好，所有浏览器都能用。
PNG 格式
PNG 常用于 16×16、32×32、48×48、96×96、180×180、192×192、512×512 等尺寸，画质更好，也支持透明。
SVG 格式
SVG 不依赖分辨率，任意大小都清晰。现代浏览器已支持，适合高分屏。
Apple Touch Icon
苹果设备用 apple-touch-icon.png，一般为 180×180，作为主屏幕图标，加到 iOS 主屏幕时更像样。
尺寸示例
16×16
32×32
48×48
96×96示例：同一图标在不同尺寸下的样子
设计建议
做网站图标时，可以记住这些原则：
- 尽量简单： 图标很小，简单图形最有效。细碎细节在小尺寸下会看不见
- 对比要够： 颜色对比要足，才能在各种浏览器背景下看得清
- 和品牌一致： 图标应能看出是你的品牌，和整体视觉统一
- 能放大缩小： 从 16×16 到 512×512 都要能看清
- 要实测： 在不同浏览器和设备上检查显示是否正确
好例子：简单、对比强
避免：过于复杂或对比不足
怎么做网站图标
现在用工具做网站图标很方便。无论从零开始还是用现有设计，都可以：
用在线生成器
logo87.com 这类工具可以很快做出一套图标。输入文字、选颜色和字体，下载包含所需尺寸和格式的完整包。没有设计经验也能做。
从现有图片转换
如果已有 logo 或图片，可以用 SVG 转 PNG 转成所需格式和尺寸，做出和品牌一致的图标。
从零设计
设计师也可以用图形软件逐像素做，所有尺寸都精确控制。
小结
网站图标虽小，却是站点识别的一部分。它帮用户认出你的网站、加强品牌，也改善浏览体验。提供多种格式和尺寸，才能在各类浏览器和设备上看起来完整、显示正常。
无论用在线生成器、从现有图片转换，还是从零设计，认真做一套图标都是对专业度和体验的投资。