我们都知道我们可以写一段html来把浏览器的地址栏图标替换成自己网站的图标,但是你知道在不同你浏览器下显示不同icon图标的方法吗?尤其是在Firefox下还能显示动态的地址栏icon图标呢!下面icech就为大家讲解一下如何设置不同浏览器下不同的地址栏icon图标。
1、普通方式下的地址栏icon图标替换
方法1:制作一个ico图标,然后重命名为favicon.ico,将这个icon图标文件上传至网站的根目录下就可以了。
说明:这种方法适用于各种浏览器的地址栏icon图标和收藏夹图标。
方法2:在网页的head中加入以下代码:
IE或者Firefox地址栏前换成自己的图标
< link rel="icon" href="favicon.ico" type="image/x-icon">
< link rel="Shortcut Icon" href="favicon.ico" type="image/x-icon">
可以在收藏夹中显示出你的图标
< link rel="Bookmark" href="favicon.ico" type="image/x-icon">
说明:这种方式适用于IE浏览器。
2、在Firefox下显示动态的icon图标
首先制作出一个大小为16×16像素的gif图片,文件名没有要求。然后上传到icon目录下(任意目录都可以),然后在head中加入代码:
< link rel="icon" href="icon/animated_favicon.gif" type="image/gif">
这样在Firefox浏览器下就能在地址栏中显示动态的icon图标了!但是这种方式不能再IE中显示动态效果。
所以同时使用两个代码,就可以同时在IE和Firefox浏览器的地址栏下显示不同的icon图标了。在不同浏览器下地址栏ico图标显示效果可以点击这里查看到。
代码如下:
< link rel="icon" href="favicon.ico" type="image/x-icon">
< link rel="Shortcut Icon" href="favicon.ico" type="image/x-icon">
< link rel="icon" href="icon/animated_favicon.gif" type="image/gif">
注意:不论是icon格式还是gif格式的图标,大小都应该是16×16像素。代码“< link”中icech加了一个空格,使用的时候要注意去掉空格。
声明:本文为西部e网原创,转载请注明来源。