《Web前端开发精品课 HTML与CSS进阶教程》——1.5 浏览器标题栏小图标-阿里云开发者社区

开发者社区> 安全> 正文

《Web前端开发精品课 HTML与CSS进阶教程》——1.5 浏览器标题栏小图标

简介:

本节书摘来自异步社区《Web前端开发精品课 HTML与CSS进阶教程》一书中的第1章,第1.5节,作者: 莫振杰 更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.5 浏览器标题栏小图标

在浏览网页的时候,我们会发现几乎所有网站的页面在浏览器标题栏前面都会有一个小图标,如图1-3所示。


24dc164f2cc4e1a0f85029c5ed3f5b332acfcf61

图像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所示。


<a href=https://yqfile.alicdn.com/5d757031fb961a28d7259629ef318a40c6f8f1f0.png" >

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
+ 订阅

云安全开发者的大本营

其他文章