浏览器标签上的favicon图标是怎么实现的?

浏览器标签栏的favicon图标,有良好的用户体验和页面美观的作用,然而怎样设置这样的favicon图标呢?对于不同的浏览器,会有一定的差异,一般而言有下列方法:

1.对于现在的大部分浏览器,如IE、chrome、火狐:只需要将显示的16x16像素的ICO图标命名为favicon.ICO放置在网站根目录下,浏览器会自动检索,写文章之前,都已经测试过,最新版本的火狐、谷歌、IE都支持,如果发现不支持,应该是浏览器版本过低的原因了,升级一下浏览器即可或者第二种方法;


2.这是所有浏览器通用的在标签页加入指定图标的方法:
把favicon.ico图标放到网站根目录下,在网页的<head></head>中加入

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

 

3.对于火狐浏览器:图标格式没有IE那么严格,GIF和PNG格式的图标也可以显示,图标名称也可以不是favcion


4.把图标放在根目录后,在<head></head>中加入

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="icon" href="gif_favicon.gif" type="image/gif" >

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="icon" href="png_favicon.png" type=" image/png" >

 

5.链接在线的图片的时候,可以使用下面的方法(最好不要这样)

<link href="图片地址" rel="SHORTCUT ICON">

 

posted @ 2016-11-23 17:41  恩恩先生  阅读(8430)  评论(0编辑  收藏  举报