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

Posted 2022-10-22

什么是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">

参考文章

[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​​