读取网站favicon

本文由 作者 苏苏 于 2017-1-12 15:03 发布在  网站博客    

favicon,即Favorites Icon的缩写,是其可以让浏览器的收藏夹中除显示相应的标题外,还以图标的方式区别不同的网站。(via百度百科)

favicon是网站的标识,更直观的图形显示让用户知道进入的是哪个网站,提高了用户体验,也间接提高了用户的粘性。目前,几乎所有的网站都有了自己的favicon,

http://www.baidu.com/
http://www.weibo.com
http://www.qq.com
http://www.163.com
favicon图片尺寸,默认为16px*16px,也可以是32px*32px等正方形尺寸。

favicon的默认图片格式,和主流的png、jpg、gif不一样,其默认格式为ico,可以借助一些制作favicon网站来专门处理主流图片生成(见参考资料),当然也可以是png、jpg、gif等格式作为网站的favicon。

在制作好网站的favicon之后,设置网站的favicon方式有2种:

A、直接在网站的根目录上传favicon文件,优点是快速简单,缺点是只能使用ico格式的图片,图片路径不能变。
B、在每个页面的头部声明网站的favicon地址,优点是可以使用任何格式图片及图片路径,缺点是读取favicon会相对麻烦。
以上2个方法,推荐使用第一种。

详细说下第2种方法,在网站的每个页面都要声明favicon地址。可以在head标签内添加如下代码:

<link rel="shortcut icon" type="image/x-icon" href="/img/favicon.ico">
该link标签必须具备rel属性或type属性的之一,href属性表明了favicon的地址。该图片也可以是其他格式,如:

<link rel="shortcut icon" type="image/x-icon" href="/img/logo.gif">
根据设置favicon的方式,就有2种读取favicon的方法:

A、默认直接读取网站根目录的favicon.ico文件。
B、如果不存在根目录下的favicon.ico文件,就读取页面里favicon的声明。
相比之下,获取网站根目录下的favicon.ico文件是最简单快捷的,但如果网站根目录下没有该文件,就需要使用后台程序读取网页的源代码,非常的麻烦。

为了克服获取favicon的麻烦,应运而生了一些获取favicon的公共API,如:

dnspod:http://statics.dnspod.cn/proxy_favicon/_/favicon?d...
google:http://www.google.com/s2/favicons?domain=域名
getFavicon:http://www.getfavicon.org/?url=url地址
g.etfv.co:http://g.etfv.co/url地址
对网络速度而言,dnspod是国内的,快速并且稳定。谷歌的稳定性值得信赖,但因为时常在墙外,而不得不放弃。第3个getFavicon是早期获取favicon的网站,目前已经game over了。第4个也是国外的,也是经常在某些地区无法正常访问。第1和第2个胜出一筹。

对于传递参数而言,dnspod和谷歌都是传参域名,第3和第4个是传参url。第3和第4个胜出一筹。

总体而言,4个都打成了平手。

如此境遇下,我开发了一款获取网站favicon的公共API,只需要在传入网址即可获取图片,目前服务器设在阿里云,因此只能获取可访问网址的favicon。使用方法也很简单,如:

通过域名地址或者域名来获取网站的favicon  http://favicon.ydr.me/?url=http://www.baidu.com/  http://favicon.ydr.me/?url=www.baidu.com
百度百科:http://baike.baidu.com/view/188557.htm
g.etfv.co:http://g.etfv.co/
在线制作favicon:http://www.favicon.cc/

标签: 网站

  • blogger

发表评论:

网站管理网站首页手机访问RSS留言建议关于本站联系方式

爱上书 All Rights Reserved. Powered by emlog & Themes by ewcms