提起favicon，很多同学一头雾水，不清楚是用来干嘛的，只听过前端同学偶尔提起它。其实favicon在网页中无处不在，但却也是很容易忽略设计的一个地方。
那么favicon是什么？有什么用？怎么制作呢？
看完本文你将解决以下问题
favicon制作方法
favicon如何在网页中展示
1：favicon介绍
favicon中文名叫收藏夹图标，用的最多的地方就是网页标签和书签列表中，比如这些
Tips：里面有个网站没有设置favicon，就会显示默认的白色图标。
favicon不仅仅是增加网站的美观程度，更重要的是突出了品牌，有利于品牌宣传。
2：favicon的制作
favicon的格式是.ico，它也是一种图片格式。一般的favicon是正方形的，支持透明度。
其实现代浏览器中，直接使用png或jpg的图也是可以的。
网上有很多在线工具来制作，推荐这个工具http://www.bitbug.net/
一般网站的favicon是16px-16px，视网膜屏需要2倍图，因此我们一般生成32px-32px的.ico文件，否则在高清屏中，图标会变得模糊。当然，生成200-200的图也是可以的，现代浏览器没有那么多约束了。
不过老版本浏览器可能只能识别.ico文件，所以我们还是要遵循标准，使用.ico格式文件。
完成之后，前端工程师会把这个文件加载到网站的header头部代码中，我们就可以看到了。
这是iconfont网站的favicon代码位置。
3：动态favicon
favicon甚至也可以是动态，使用gif格式也是允许的，不过Chrome不支持gif，火狐倒是支持，来个吃豆人举例
大家有兴趣可以去试试其他浏览器，替换方法见这篇文章：iPic图床工具，让你的图片转为网络地址
只需要把图标网络地址生成，替换header代码中对应的图片链接即可。
总结
可能有的设计师会联想到，iPhone中的Safari是可以把网站的图标发送到桌面的，那这个图标也是favicon吗？答案是否定的，这个图标叫做apple-touch-icon，属于苹果设备私有属性，大家有兴趣的可以探索下。
关于favicon，这其实是前端工程师的工作，设计师只需要提供图片即可。不过对于UI设计师来说，理解其中的来龙去脉，会对整个设计流程有非常大的促进作用。
希望这篇能给大家带来帮助。
更多UI设计干货文章请关注UI黑客
微信公众号 uihacker
UI黑客官网http://www.uihacker.com/
UI黑客论坛http://bbs.uihacker.com/
