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

本节书摘来自异步社区《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所示。

https://yqfile.alicdn.com/5d757031fb961a28d7259629ef318a40c6f8f1f0.png"

【我的前端】CSS在Windows下实现Mac浏览器滚动条 众所周知，Windows 和 macOS 浏览器的滚动条在默认情况下是不一致的，最为显著的是 macOS 的滚动条是不占据屏幕尺寸的，macOS 的滚动条如下：
异步社区 异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区，也是国内领先的IT专业图书社区，致力于优质学习内容的出版和分享，实现了纸书电子书的同步上架，于2015年8月上线运营。公众号【异步图书】，每日赠送异步新书。