html1 -- link标签之icon 和 bookmark
1.shortcut和bookmark两者说明
shortcut icon:特指浏览器中地址栏左侧显示的图标,一般放大小为16x16 或者 32*32(再大是完全没有必要的!16、32、48、64、128、),后缀名为.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>
2.shortcut各浏览器兼容
对于不同的浏览器,方法是有差别的
(firefox和chrome可以直接在物理地址访问,其他要用服务器地址如127.0.0.1)
1/4. 浏览器通用:这大概是所有浏览器通用的在标签页加入指定图标的方法:
把favicon.ico图标放到网站根目录下,
在网页的<head></head>
中加入<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<head>
<title>shortcut icon</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
2/4. 对于**IE**浏览器:把需要显示的16x16像素的ICO图标命名为favicon.ICO放置在网站根目录下,浏览器会自动检索
3/4. 对于**火狐、Safari、Chrome、\**Edge\****浏览器:图标格式没有IE低版本那么严格,**GIF**(兼容性差)**和PNG**格式的图标也可以显示,图标名称也可以不是favcion 把图标放在根目录后,在``````中加入
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="icon" href="gif_favicon.gif" type="image/gif" >
或(显示最下面的图标(除Edge),如下png)
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="icon" href="png_favicon.png" type=" image/png" >
4/4. **Vue**: Vue框架要改配置文件build/webpack.dev.conf.js,
plugins:[new HtmlWebpackPlugin({favicon: 'favicon.ico'})]
3. icon制作
- 图片转化为ico格式(在线工具:比特虫)
- 测试用图片(16x16)
① ico
② png
③ gif
参考
.lgyong