html0 -- <head>（icon VS bookmark、meta）

最新推荐文章于 2021-06-03 12:30:35 发布

weixin_34037515

最新推荐文章于 2021-06-03 12:30:35 发布

阅读量277

点赞数

原文链接：http://www.cnblogs.com/lgyong/p/9166342.html

版权

shortcut icon：特指浏览器中地址栏左侧显示的图标，一般放大小为16x16 或者 32*32（再大是完全没有必要的！），后缀名为.icon的图标；

bookmark：浏览器书签、收藏用的图标；

<head>
    <title>shortcut icon VS bookmark</title>
    <!-- 地址栏左侧显示的图标 -->
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    <!-- 书签、收藏用的图标 -->
    <link rel="bookmark" type="image/x-icon" href="favicon.ico">
</head>

兼容：

对于不同的浏览器，方法是有差别的
（firefox和chrome可以直接在物理地址访问，其他要用服务器地址如127.0.0.1）

①. 浏览器通用：这大概是所有浏览器通用的在标签页加入指定图标的方法：
把favicon.ico图标放到网站根目录下，在网页的<head></head>中加入<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

<!DOCTYPE html>
<html>
<head>
    <title>shortcut icon</title>
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
    <h1>shortcut icon</h1>
    <p>特指浏览器中地址栏左侧显示的图标，一般放大小为16x16 或者 32*32（再大是完全没有必要的！），后缀名为.icon的图标；</p>
</body>
</html>

②. 对于IE浏览器：把需要显示的16x16像素的ICO图标命名为favicon.ICO放置在网站根目录下，浏览器会自动检索
③. 对于火狐、Safari、Chrome、Edge浏览器：图标格式没有IE低版本那么严格，GIF（兼容性差）和PNG格式的图标也可以显示，图标名称也可以不是favcion
把图标放在根目录后，在<head></head>中加入

2、meta

①.

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

②.

Meta标签中的format-detection属性及含义

<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="email=no" />

③.

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

如果支持Google Chrome Frame：GCF，则使用GCF渲染；
如果系统安装ie8或以上版本，则使用最高版本ie渲染；
否则，这个设定可以忽略　

附加：

（1）图片转化为ico格式
　　在线工具：比特虫http://www.bitbug.net

（2）测试用图片(16x16)

　　① ico

　　② png

　　③ gif

（3）参考博主

theWayToAce

icon图片的几种大小规格

16*16
32*32
48*48
64*64
128*128

转载于:https://www.cnblogs.com/lgyong/p/9166342.html

weixin_34037515

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html0 -- <head>（icon VS bookmark、meta）

shortcut icon：特指浏览器中地址栏左侧显示的图标，一般放大小为16x16 或者 32*32（再大是完全没有必要的！），后缀名为.icon的图标；bookmark：浏览器书签、收藏用的图标；<head> <title>shortcut icon VS bookmark</title> <!-- 地址栏左侧显示的图标...
复制链接

扫一扫