Favicon的使用方法与制作-UI黑客

提起favicon,很多同学一头雾水,不清楚是用来干嘛的,只听过前端同学偶尔提起它。其实favicon在网页中无处不在,但却也是很容易忽略设计的一个地方。

那么favicon是什么?有什么用?怎么制作呢?

看完本文你将解决以下问题

  • favicon制作方法
  • favicon如何在网页中展示

1:favicon介绍

favicon中文名叫收藏夹图标,用的最多的地方就是网页标签和书签列表中,比如这些

Favicon的使用方法与制作-UI黑客
Favicon的使用方法与制作-UI黑客

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头部代码中,我们就可以看到了。

Favicon的使用方法与制作-UI黑客

这是iconfont网站的favicon代码位置。

3:动态favicon

favicon甚至也可以是动态,使用gif格式也是允许的,不过Chrome不支持gif,火狐倒是支持,来个吃豆人举例

Favicon的使用方法与制作-UI黑客

大家有兴趣可以去试试其他浏览器,替换方法见这篇文章:iPic图床工具,让你的图片转为网络地址

只需要把图标网络地址生成,替换header代码中对应的图片链接即可。

总结

可能有的设计师会联想到,iPhone中的Safari是可以把网站的图标发送到桌面的,那这个图标也是favicon吗?答案是否定的,这个图标叫做apple-touch-icon,属于苹果设备私有属性,大家有兴趣的可以探索下。

关于favicon,这其实是前端工程师的工作,设计师只需要提供图片即可。不过对于UI设计师来说,理解其中的来龙去脉,会对整个设计流程有非常大的促进作用。

希望这篇能给大家带来帮助。