大家好,我是灰色执照。

最近,有很多朋友问我关于.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