在Firefox浏览器下显示动态icon图标

内容摘要
我们都知道我们可以写一段html来把浏览器的地址栏图标替换成自己网站的图标,但是你知道在不同你浏览器下显示不同icon图标的方法吗
文章正文

我们都知道我们可以写一段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图标了。

代码如下:
< 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加了一个空格,使用的时候要注意去掉空格。

代码注释
[!--zhushi--]

作者:喵哥笔记

IDC笔记

学的不仅是技术,更是梦想!