如何让程序适配不同尺寸的ico图标

4,846 阅读5分钟

由于参与桌面端开发的项目极少,大多数可爱的攻城狮们又都会选择自带的组件和图标,所以从来没有深入研究过ico格式的图片有什么特点。但这次,遇到一个项目需要使用自定义的ico图标,因为以前使用这种格式的场景很少,所以就天真的以为相同样式但不同尺寸的ico是由对应尺寸的png(或其他格式)直接转换生成。
为了在不同的场景下都能有好的视觉效果,我按照以往iOS和Android开发的思路,分别做了256*256,128*128,96*96,64*64,32*32,16*16这些尺寸,然后一股脑儿的塞给了开发人员。开发人员却告知只能选择一个尺寸,而虽然选了最大的256*256尺寸的,但反馈的编译后的结果却不怎么美好。上图说明。

这是我的一些安装程序,当windows系统的图标为 选择超大图标 后的缩略图预览效果。一眼就可以看出问题出在哪里,有些图标很大很清晰,比如Axure,比如typora,比如notepad++,但也有些图标的尺寸并不能放大。比如用红线框出的iSparta,比如Everything。而且系统还会给加上丑出天际的灰色的边框。各位看官可以用自己机器上的程序安装包测试一下,应该都会出现这种情况。这说明一个问题,就是这些不能提供大图标预览效果的程序,ico都是缺失的,就是最大支持到48*48。

一个=N个的ico格式

来吧,就不怕出现问题,每个遇到的坑都是进阶的路 ,查了资料,试验了一下,最终还是解决了 让程序适配不同尺寸的ico 的问题,在此分享,有需要做桌面端项目(windows也好 OS也好)的小伙伴有需要尽管拿去。

先看一下维基百科对ico格式的解释:

一个图标文件可以同包含多个格式,因此在不同的文件视图下可能显示完全不同的图案。这些格式可以被压缩以节约储存空间。图标被显示时,系统会自动根据要显示的大小和当前系统的颜色深度从最接近的格式中选择一个显示。

好了,从中,我们明确得到一个最基本的概念如下:

一个ico图标文件可以包含很多组图标,可以是一个集合,而不是一个单一尺寸的图标。

这就和我们平时最常见的位图有很大的区别了,众所周知,位图的尺寸是唯一的,而神奇的ico告诉我们, 它不是一个人在战斗! 它是一众小伙伴们的集合体。
专业的图片自然要交给专业的工具来完成,这里推荐一个 icofx 。和它齐名的还有另外一个软件 greenfish icon editor ,都算是免费的吧(前者有30天试用期,但网上有破解版)。因为这里并不是做软件评测对比,所以我只说自己用的icofx就好。
首先,作为一款专业的图标设计软件,除了可以做windows图标,亦可做Mac图标,亦可做鼠标的指针Cursor(包括动效),icofx也提供了很强大的设计功能,可以直接在画布上进行设计,包括图形的创建和各种图层效果。但对于广大的非专职图标设计师小伙伴而言,不需要耗费过多的精力去学习一款新软件,那这里就只说用到的功能。

从现有的图片创建一个ico图片集合

在这个案例中,我们仅需要的功能只有一个,极其简单, “Windows Icon from Image” ,从图片创建windows图标。现在,可以导入我们用任意其他作图工具制作的图标了。

软件会自动帮我们生成一些其他尺寸与色深的图片。其中,32位色深是对透明度支持最好的,而Windows XP仅支持24位色深,这里因为仅仅需要的是程序图标,先和开发人员确认一下软件的运行环境,因为毕竟涵盖的格式越多,图片越大,打包进去的程序体积也会因此变大。确认后可以删除其他不需要的格式。除了格式,如果尺寸问题也需要和开发人员确认一下,或者,从256×256-16×16直接补全。较旧的操作系统不支持超过128×128的图标,所以向旧的操作系统的图标文件中添加大图标没有意义。 然后,保存成*.ico格式。好了,可以把图标丢过去了。

????完了????
对,你需要的仅仅是了解icon的特殊性及一款专业软件,仅此而已。其实大多数情况下,桌面端的开发人员会了解相关知识,图片交付后,能自行处理,但偶尔,我是说偶尔,作为设计师,也要具备丰富的专业扩展从而从容应对这样的问题。交互设计也好,UI设计也好,或许最重要的不仅是技术,更是解决问题的能力,就酱,共勉之。