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

2021-07-21 11:08 阅读

图片格式

传统的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">
咨询
交流群
电话