传统的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.ico
图片。如果不存在就相当于一个404响应。
如果不想设置图标,又不想浪费浏览器的一次请求,则可以使用dataurl来处理。
<link rel="icon" href="data:;base64,=">
或
<link rel="icon" href="data:image/ico;base64,aWNv">