什么是ICO图标
favicon，即Favorites Icon的缩写，是指显示在浏览器收藏夹、地址栏和标签标题前面的个性化图标。 以图标的方式区别不同的网站。
ICO是Windows的图标文件格式，此格式图标文件可以存储单个图案、多尺寸、多色板的图标文件。一个图标实际上是多张不同格式的图片的集合体，并且还包含了一定的透明区域。
Mac OS中使用的是ICNS格式。
ICO，图标格式，即指英语的“icon”，其MIME类型为image/x-icon，是一种用于图标显示的图帧式。除了一般图片常见的颜色外，一般还用调色板定义了透明色和反色。
常见尺寸
下面是一些平台favicon最佳尺寸列表： 图标常见尺寸有16×16（小图标）、32×32、48×48，另外24×24、64×64、128×128也比较常见。256×256多见于Windows Vista以上版本的Windows操作系统中。
16X16：显示在地址栏、工具栏及应用左上角
32X32：显示在电脑最下方的任务栏上、微信发送的框里 48X48：桌面快捷图标
256X256:苹果桌面应用
8×8、10×10、20×20多用于工具栏的按钮。
- 绝大多数桌面浏览器：16×16, 32×32以及尽可能大
- Android Chrome：192×192
- Google TV：96×96
较旧的操作系统不支持超过128×128的图标，所以向用于旧的操作系统的图标文件中添加大图标没有意义。
ICO格式的图片和PNG格式图片是不一样的，PNG图片就是一张单独的图片，但是作为Favicon的ICO格式图片应该是一组16×16、32×32和48×48图像集合。所以，一张PNG图标格式转换成ICO格式后尺寸会大很多，是因为这个ICO图标包含了多个尺寸。系统会自动判断调用哪个大小的图标
怎么设置favicon.ico
第一种方式：
放在根目录这种方法最简单，在服务器根目录下放一个 favicon.ico 的文件，浏览器发现后就会使用。（把做好的favicon.ico图标文件上传到网站根目录，并命名为xxx.ico就可以了； ）
注意：这种方式，ico文件的名称一定要叫：favicon
第二种方法：link标签在head里面加入代码：
<link rel="shortcut icon" href="ico文件url">
//这是一种过时的用法，可以被淘汰掉用西面这种写法
<link rel="icon" type="image/x-icon" href="/path/to/icons/favicon.ico">
//引用ico格式
<link rel="icon" type="image/svg+xml" href="./assets/images/favicon.svg">
//引用SVG格式
<link rel="icon" type="image/png" href="./assets/images/favicon.png">
//引用png格式
注：这种方式，图标的名称就可任意命名了，只需要路径填上即可，根目录下”./“可以省略。
此外我们也可以用PNG图标ico支持所有浏览器，对于现代桌面浏览器，推荐使用PNG图标作为favicon。
我们还可以使用sizes属性指定PNG图标的尺寸，这样浏览器自己可以选择合适的小图标。
<link rel="icon" type="image/png" href="/favicon-16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32.png" sizes="32x32">
在不同浏览器下测试发现Chrome，Firefox，IE edge下小图标均换成了圆角的“图标”。
然后我们打开控制台看下chrome浏览器下请求的尺寸是32X32的PNG图标
再看下Firefox的请求则是16X16和128X128两个尺寸
为什么要引用多个尺寸ICO是Windows的图标文件格式
此格式图标文件可以存储单个图案、多尺寸、多色板的图标文件。一个图标实际上是多张不同格式的图片的集合体，并且还包含了一定的透明区域。
我们知道一张小图被放大很多，图片就会变得很模糊；相反，如果很大的图片缩成很小，图片也会看不清，也就是大家说的图片花了。
最佳的解决方法就是按对应场景设计不同分辨率图标集成为一个 ico 格式的图标
ico_test.ico 是由右边7个 png 合成的，每个 png 上的数字对应了自己的分辨率，然后我把ico_test.ico应用到一个测试程序上，得出效果如下:
favicon的图片在线转换(免费无广告)
favicon与404本地网页开发的时候，Chrome浏览器经常可以看到 favicon.ico 404错误，这个可以忽略，只要线上服务器跟地址有favicon.ico就可以了，不要担心上线会出问题，因为网页如果没有指定favicon浏览器会自动从域名的根目录下查找名为favicon.ico的文件，如果找不到就会404。
如果本地这个错误提示让你很烦，则你可以制作一个和线上favicon.ico形状图形一样，但颜色不同的favicon.ico放在本地开发目录的跟地址中。比如：线上favicon用蓝色系的，本地环境的favicon.ico使用红色系；
如何禁用服务器请求ico
如何让网站不去请求favicon图标在做 H5 混合应用的时候，不希望产生 favicon.ico 的请求。可以在页面的区域，加上如下代码实现屏蔽：
<link rel="icon" href="data:;base64,=">
或者详细一点
<link rel="icon" href="data:image/ico;base64,aWNv">
ico的base64编码就是aWHN,关于Data URL的相关知识，可以看下我整理的这篇文章 Data URL相关知识
参考文章
[1] HTML favicon尺寸 格式 制作等相关知识，作者张鑫旭.
[2] favicon.ico学习（一）什么是 favicon.ico，为何我的浏览器会向其秘密发送请求？ 作者坤嬷嬷
[3]Does a favicon have to be 32×32 or 16×16? 网站：Stackoverflow
[4] Data URL相关知识
标签：场景,ico,favicon,格式,ICO,浏览器,图标 From： https://blog.51cto.com/u_15525868/5780505