Favicon的使用方法与制作

提起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/

---