关于浏览器标签页的Favicon图标

文章目录

1. 1. 图片格式
2. 2. 如何设置图标
3. 3. 图标大小
4. 4. 是否需要 favicon 图标

图片格式

传统的 favicon 图标使用 ico 格式。但 ico 格式以及过时，不宜再使用。除非是 IE6 这种古老的浏览器必须使用 ico 作为浏览器标签页图标，其它浏览器都支持使用 png、gif 等格式图标。

如何设置图标

在页面上使用如下代码，即可指定图标：

<link rel="icon" href="/favicon.png">

虽然在直接在网站根目录下放置 favicon.ico图片，也会默认当作图标，但这种方式不推荐使用。因为这并不是标准，可能会被废弃；而且也无法处理缓存问题，比如图标修改了浏览器还显示老图标。

图标大小

一般为 16*16。但很多网站使用 32*32，mozilla 网站甚至用的是 48*48。有时也会为 ipad 准备一个 180*180的图标。

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" sizes="16x16" href="/favicon-16x16.png">

是否需要 favicon 图标

一般来说，是需要的。即使没有指定 favicon 图标，浏览器也会主动访问根目录的 favicon.ico图片。如果不存在就相当于一个 404 响应。

如果不想设置图标，又不想浪费浏览器的一次请求，则可以使用 dataurl 来处理。

<link rel="icon" href="data:;base64,=">

或

<link rel="icon" href="data:image/ico;base64,aWNv">