Favicon Tools检测创建
Basics

什么是 Favicon?完整指南

Favicon 是浏览器为你的网站显示的方形小图标:出现在标签页里、书签旁、历史记录中,以及手机主屏幕上。它是一个从你自己域名提供的真实图像文件,通过页面 head 中的引用加载,通常需要提供多种尺寸,让每个显示位置都能选到最合适的那一个。

Favicon 究竟出现在哪些地方

标签页是最显而易见的位置,但它对图标的要求最低。书签栏、历史记录列表、浏览器起始页、搜索结果、聊天应用中的链接预览,以及手机主屏幕,都会去取一个图标,而其中好几个位置需要的文件都比标签页大得多。

这正是 favicon 其实是一套文件、而非单个文件的原因。16 像素的标签页图标和 180 像素的 iOS 主屏幕图标是两张不同的图像,各自有不同的设计约束,即便它们源自同一个标志。

同一个标志在真正重要的各个尺寸下

Example favicon at 16 by 16 pixels
16px
Example favicon at 32 by 32 pixels
32px
Example favicon at 48 by 48 pixels
48px
Example favicon at 96 by 96 pixels
96px
Example favicon at 180 by 180 pixels
180px
按真实像素尺寸渲染,未做显示缩放。在 180px 下清晰可辨的细节,到了 16px 就会彻底消失。

Favicon 常见问题

Favicon 是必需的吗?

没有任何标准强制要求它,但浏览器无论如何都会去请求 /favicon.ico,缺少图标时就会显示为空白或通用占位符。对一个新产品来说,这看起来就像没做完。

Favicon 和 app 图标有什么区别?

Favicon 在浏览器里标识你的网站;app 图标则代表主屏幕或启动器上已安装的应用。实际操作中,两者都来自同一套图形并一起发布,这也是生成器会同时导出两者的原因。

相关术语