本文介绍如何使用HTML中的link标签来设置网页在浏览器标题栏显示的小图标，并提供了.ico格式图标制作工具的获取途径。
本节书摘来自异步社区《Web前端开发精品课 HTML与CSS进阶教程》一书中的第1章，第1.5节，作者： 莫振杰 更多章节内容可以访问云栖社区“异步社区”公众号查看。
1.5 浏览器标题栏小图标
在浏览网页的时候，我们会发现几乎所有网站的页面在浏览器标题栏前面都会有一个小图标，如图1-3所示。
图像198833.PNG
图1-3 浏览器标题栏小图标
想要实现这个效果，我们只需要在head标签添加一个link标签即可。
语法：
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
说明：
rel和type这两个属性的取值是固定形式，无需多讲。href属性取值为小图标的地址，这个地址是根据小图标在站点文件夹路径而定的，跟图片引用路径是一样的道理。
这里注意一下，小图标格式是.ico，而不是.jpeg、.png、.gif等格式。对于.ico格式的图标制作，我们可以搜索一下“在线icon”，会发现很多不错的在线工具，大家可以收藏一下。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>绿叶学习网</title>
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico"/>
</head>
<body>
</body>
</html>在浏览器预览效果如图1-4所示。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
