ICO图标的制作和实际应用场景

什么是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里面加入代码：

//这是一种过时的用法，可以被淘汰掉用西面这种写法


//引用ico格式


//引用SVG格式


//引用png格式

注：这种方式，图标的名称就可任意命名了，只需要路径填上即可，根目录下”./“可以省略。 

此外我们也可以用PNG图标

ico支持所有浏览器，对于现代桌面浏览器，推荐使用PNG图标作为favicon。

我们还可以使用sizes属性指定PNG图标的尺寸，这样浏览器自己可以选择合适的小图标。

在不同浏览器下测试发现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 的请求。可以在页面的 区域，加上如下代码实现屏蔽：

或者详细一点

favicon与base64

favicon除了使用线上地址，还支持base64格式内联，例如：

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