什么是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：桌面快捷图标
16X16.png
32X32.png
48X48.png
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图标
chrome浏览器请求
再看下Firefox的请求则是16X16和128X128两个尺寸
image.png
为什么要引用多个尺寸
ICO是Windows的图标文件格式，此格式图标文件可以存储单个图案、多尺寸、多色板的图标文件。一个图标实际上是多张不同格式的图片的集合体，并且还包含了一定的透明区域。
我们知道一张小图被放大很多，图片就会变得很模糊；相反，如果很大的图片缩成很小，图片也会看不清，也就是大家说的图片花了。
image.png
最佳的解决方法就是按对应场景设计不同分辨率图标集成为一个 ico 格式的图标
ico_test.ico 是由右边7个 png 合成的，每个 png 上的数字对应了自己的分辨率，然后我把ico_test.ico应用到一个测试程序上，得出效果如下:
favicon的图片在线转换(免费无广告)
https://realfavicongenerator.net/
image.png
favicon与404
本地网页开发的时候，Chrome浏览器经常可以看到 favicon.ico 404错误，这个可以忽略，只要线上服务器跟地址有favicon.ico就可以了，不要担心上线会出问题，因为网页如果没有指定favicon浏览器会自动从域名的根目录下查找名为favicon.ico的文件，如果找不到就会404。
如果本地这个错误提示让你很烦，则你可以制作一个和线上favicon.ico形状图形一样，但颜色不同的favicon.ico放在本地开发目录的跟地址中。比如：线上favicon用蓝色系的，本地环境的favicon.ico使用红色系；
这样一眼就看清楚到底是线上环境还是本地环境，免得数据测试的时候不小心在线上环境操作。我找了张css-tricks的示意图：
如何让网站不去请求favicon图标
在做 H5 混合应用的时候，不希望产生 favicon.ico 的请求。可以在页面的 <head> 区域，加上如下代码实现屏蔽：
<link rel="icon" href="data:;base64,="> 或者详细一点 <link rel="icon" href="data:image/ico;base64,aWNv">
favicon与base64
favicon除了使用线上地址，还支持base64格式内联，例如：
<link rel="icon" href="data:image/x-icon;base64,AAABAA...8AAA==" type="image/x-icon" />
file://协议打开的本地HTML静态页面可以使用这种方式让浏览器地址栏的favicon显示。
[参考文章]
[1]https://www.zhangxinxu.com/wordpress/2019/06/html-favicon-size-ico-generator/?shrink=1.
[2]https://www.jianshu.com/p/58007c9a762d.
[3]https://www.cnblogs.com/kunmomo/p/13398818.html
[4]https://stackoverflow.com/questions/4014823/does-a-favicon-have-to-be-32x32-or-16x16
