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

最新推荐文章于 2023-08-04 10:47:53 发布

weixin_30906185

最新推荐文章于 2023-08-04 10:47:53 发布

阅读量151

点赞数

原文链接：http://www.cnblogs.com/engeng/articles/6094585.html

版权

浏览器标签栏的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">

转载于:https://www.cnblogs.com/engeng/articles/6094585.html

weixin_30906185

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浏览器标签上的favicon图标是怎么实现的？

浏览器标签栏的favicon图标，有良好的用户体验和页面美观的作用，然而怎样设置这样的favicon图标呢？对于不同的浏览器，会有一定的差异，一般而言有下列方法：1.对于现在的大部分浏览器，如IE、chrome、火狐：只需要将显示的16x16像素的ICO图标命名为favicon.ICO放置在网站根目录下，浏览器会自动检索，写文章之前，都已经测试过，最新版本的火狐、谷歌、IE都支持，如果发现...
复制链接

扫一扫