如何制作ico图标
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何制作ico图标相关的知识，希望对你有一定的参考价值。
参考技术A ico图标在线制作方法：首先打开： http://www.suchabang.com/ico/ 选择你需要制作成ico图标的图片，选择相应的大小，然后点击生成图标按钮，即可自动生成对应的ico 图标，在自动弹出的保存图片对话框中选择保存位置即可。
支持png，jpg，gif格式的图片转换，转换后的ico图标大小格式可以选，有16*16的、 32*32的和 48*48的。
ico图标调用方式：
1.浏览器一般都支持ICO图标，它显示于浏览器的地址栏、标签及收藏夹上，一般情况下使用ico图标时，图标大小为16×16，命名为"favicon.ico"，然后将其上传到空间的根目录，最后在网页代码的<head>与</head>之间加入下面的代码即可：
<link rel="shortcut icon" href="favicon.ico">
2.文件夹或程序包使用ico图标方法：
以文件夹使用为例，把ICO图标命名为"desk.ico"，然后把下面的代码复制到记事本并保存在该文件夹根目录内，命名为"desktop.ini"即可
[.ShellClassInfo]
InfoTip=文件夹说明
IconFile=desk.ico
IconIndex=0
3.分区盘符使用ico图标方法：
可把ICO图标命名为"partition.ico"，然后把下面的代码复制到记事本并保存在该分区根目录内，命名为"autorun.inf"即可
[autorun]
icon=partition.ico
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：桌面快捷图标
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
以上是关于如何制作ico图标的主要内容，如果未能解决你的问题，请参考以下文章