制作一个标准 ICO 图标


1、ICO

ICO是Windows的图标文件格式,此格式图标文件可以存储单个图案、多尺寸、多色板的图标文件。一个图标实际上是多张不同格式的图片的集合体,并且还包含了一定的透明区域。

2、应用场景

最近发布一个 WPF 程序时,引用 ico 图标发现效果很模糊,后来查其原因是因为我所用的图标是由 png 转换过来的,而这张 png 在高分辨率下可以清晰显示,低分辨率下就模糊了

一张 png 转换出来的 ico 图标效果如下:

image.png

前面的还行 32、16 的就几乎看不清了,这就导致应用这个 ico 图标的程序在小图标显示下效果很差。

所以按对应场景设计不同分辨率图标集成为一个 ico 才是最佳解决方式。

3、Windows 在各个场景对图标分辨率的选择

为了找出 Windows 在各个场景对图标分辨率的选择我设计了如下 ico

image.png

ico_test.ico 是由右边7个 png 合成的,每个 png 上的数字对应了自己的分辨率,然后我把 ico_test.ico 应用到一个测试程序上,得出效果如下

大图模式显示

image.png

详细信息列表显示

image.png

桌面显示

image.png

工具栏及应用左上角小图标

image.png

微信发送

image.png

结果显而易见,常用的这几种场景会显示分辨率为 256*256 48*48 32*32 16*16 的图标

4、制作一个合格的 icon

推荐一个免费 Icon 编辑器 Greenfish Icon Editor Pro,制作过程也很 easy

首先打开一张 png ,然后 点图标-->根据当前布局创建图标

image.png

一般情况下选最下面一行就OK,包含了绝大部分使用场景

image.png

然后 ctrl+a ctrl+x 删除需要修改的分辨率所对应的图标

image.png

拖入准备好的各个分辨率图标 ctrl+a ctrl+c ctrl+v 粘近对应的位置就OK,左侧竖排图标可以预览效果

image.png

完成之后 ctrl+s 另存为 ico 文件即可。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Micro_awake web

微信小程序中的rpx与移动设备物理像素

1452
来自专栏前端知识分享

第134天:移动web开发的一些总结(二)

width —— 视口宽高 height —— 视口宽高 device-width —— 设备的宽高 device- height —— 设备的宽高 orien...

1671
来自专栏HTML5学堂

iconfont字体图标库

HTML5学堂小编的话:昨日发布的iconfont的内容有些不足,对于可能不太了解iconfont和特殊字体的学习者来说,可能会存在一定的理解问题,在此针对昨日...

1.2K6
来自专栏互联网杂技

手机网页布局经验总结

引言 众所周知,在当今移动互联网大行其道的现在,基本上所有的年轻人都是使用过手机去浏览一些网站的资讯或者使用过手机去购物网站支付买过东西,但是大家有没有想过这样...

4676
来自专栏姬小光

姬小光前端小讲堂【第007期】- 切图大法之表格布局

前面几期中,我们已经了解到了前端开发的三板斧,即 HTML,CSS,Javascript。熟练掌握这三个基本技能,基本上就可以混口饭吃了。

1152
来自专栏ytkah

Bootstrap速学教程之简要介绍

  Bootstrap是Twitter推出的一个用于前端开发的开源工具包,由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一...

2698
来自专栏我分享我快乐

Adobe animate cc 界面解读

我们都知道Adobe animate cc 可帮助我们不用写代码的情况下完成简单的交互动效实现,但是对于初学者而言,英文界面成为想关注它的人望而却步。首先,我强...

44315
来自专栏Python爬虫实战

数字华容道03:首页创建

整个布局采用 QVBoxLayout (竖型布局)。最上方的“数字华容道”字样是一张图片,采用QLabel进行展示。下面几个选择难度的按钮和排行榜按钮采用 QP...

812
来自专栏AndroidTv

一起撸个简单粗暴的Tv应用主界面的网格布局控件(下)

上一篇中我们已经一起学了怎么简单粗暴的撸个支持动态布局的网格控件出来,但在上一篇的介绍中,并没有学习实现网格控件的滑动效果,所以本篇就来讲讲,要如何让我们的网格...

3528
来自专栏前端杂货铺

css截断长文本显示

实现 截断长文本显示处理,以前是通过后台的截取,但这种方法容易丢失数据,不利于SEO。 而通过前端css的截断,则灵活多变,可统一运用与整个网站。 这项技术主要...

3717

扫码关注云+社区

领取腾讯云代金券