恭喜你成为UI中国推荐设计师 (详情)

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
桌面图标基础知识普及
3.4°
原创文章 / 教程 / / 举报
542 8 4 0

2021-11-25

这里有关于.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

收藏

8人已收藏

  • 49

    作品

  • 401

    粉丝

  • 33

    关注

  • 王炸推荐:全球牛逼数据可视化界面汇总
  • 水波纹百分比动效教程,设计+代码我都一起教你了
  • 设计的未来在哪里?35岁的老设计师去了哪?
  • 立体饼图动效教程,设计+代码我都一起教你

猜你喜欢

    灰色执照

    灰色执照

    活雷锋老马识途叫兽原创小生
    • 401

      粉丝

    • 192

      人气

    • 3892

      颜值

    作品

      灰色执照

      点赞:4

      收藏:8

      评论:0

      桌面图标基础知识普及

      你确定要举报桌面图标基础知识普及

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2021年11月25日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      账号或密码错误

      发送验证码 120s 验证码错误

      登录

      可云端编辑的专业级UI设计工具

      立即体验