关于浏览器标签页的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">