这里有关于.ico格式图标的一切基础知识
大家好，我是灰色执照。
最近，有很多朋友问我关于.ico格式的图标相关的问题，今天我将给大家做一个详细的介绍：
.ico后缀的文件是一种图标的格式，通常我们用在两个地方，一个是网页顶部（浏览器标签栏的左上角）另一个是桌面程序的图标，比如你平时用的QQ，桌面的图标就是这种格式。
▲ 浏览器顶端，标签左上角这种图标就是.ico格式的。
和普通的jpg、png图片比起来，ico图标有一个显著的特点，就是他是用多张png图片合成的。他能够根据显示的需要自适应大小。
▲ 通常制作一个 Windows 桌面的 ico文件，我会先制作这么多尺寸的 png 图片。然后通过 Axialis IconWorkshop 这个工具，把他们压缩到一起。这样，就能得到一个可以自适应大小的 ico 文件了。
▲ 右键空白处，你就发现，查看图标的方式有很多种：超大图标、大图标、中等图标、小图标、列表、详细信息、平铺、内容。
用不同的查看方式，ico就自动展示不同的png图片了。这就是ico文件和普通图片的不同。
▲ 查看方式：大图标
▲ 查看方式：中等图标
▲ 查看方式：小图标
这就是 Axialis IconWorkshop 这个软件的界面了，你新建一个图标的时候，他就会要求你选择多个格式：
▲ 把png图片合成 ico 的软件：Axialis IconWorkshop 非常的方便好用。如果你有制作ico的需求，加我微信，我把这个软件的安装程序发给你。我的微信号是：nbchart
这就是ico的基本知识，但是网页顶部的那个图标又有什么不同呢？
网页顶部的图标，通常都叫做 favicon.ico (意思是：我最喜爱的图标) 因为互联网的“祖先们”做网站的时候，都会用这个名字。再加上程序员都很懒惰，都是复制来复制去，很少有人愿意去改这个名字。所以就约定俗称，基本上都是这个名字了（当然，你其实是可以随便改成任何名字的）。
通常你F12打开浏览器的控制台，你都能在<head />中间找到 favicon.ico
▲ 打开站酷的控制台，你能找到favicon.ico文件。
▲ 打开微博的控制台，你也能找到favicon.ico文件。
一般来说，favicon.ico里面只会用2张png图片来合成这个图标。就是16*16和32*32的两张。这么做的原因是：保证普通屏幕和2k、4k屏幕都能看到一个比较清晰的图标。只压缩两张图片，可以让这个文件更小，用户访问更快。
随着时间的推移，现在很多网站也不在网站头部放ico文件了，直接放png就可以了。
▲ 像这样，放2个png图片是完全可行的。现在做网站，你完全不需要再去下载任何图标软件，非要把一个图片弄成ico格式了
当然，还有一种特殊的情况，就是你F12查看控制台，发现<head />里面完全找不到这个图标相关的信息。优设网目前就是这种情况。
▲ 那么，他顶部的那个图标是从哪里来的呢？
这是因为他在他的服务器根目录里面放了一个favicon.ico文件。一旦网站读取不到页面上的图片，就会去服务器最顶端读取一个favicon.ico文件。我们只要访问域名后面加上/favicon.ico就能看到对应的小图标了。
▲ 代码里面找不到小图标，就访问 https://www.uisdc.com/favicon.ico 就能看到对应的图标了。
以上就是关于.ico格式图标的所有知识了，你学会了吗？
Powered by Froala Editor
76
作品
646
粉丝
33
关注
大牛，别默默的看了，快登录帮我点评一下吧！:)
登录 立即注册