在链接前面自动添加favicon 图标（jquery）

2013/10/13 前端代码, 前端开发原创 4 10,314

相信你在一些网站上看过类似的东东，就是在一个可点击外链左侧，会有一个目标链接网站的favicon 图标。这一个小小的设置可能对提升用户体验有不少帮助，一些WordPress 站点也利用这个来做“友情链接”页面。下面介绍一下实现的方法，只要是jquery 的运用+一个获取网站favicon 图标的接口（api）。

演示

首先还是给个demo 先：传送门

教程

先献上代码：
html：

	<a href=http://Devework.com>Devework</a>
<a href=http://www.jianhui.org>Jeff的阳台</a>
<a href=http://www.google.com>Google</a>
<a href=http://www.google.com.hk>Google HK</a>
<a href=http://127.0.0.1>localhost</a>

CSS:

a { display: block; text-decoration: none; padding: 10px; }

jquery：

$("a[href^='http']").each(function() {
    $(this).css({
        background: "url(http://www.google.com/s2/u/0/favicons?domain" + this.href + ") left center no-repeat",
        "padding-left": "40px"
    });
});

当然，务必要先加载jquery 库。

注意到jquery 代码中的
http://www.google.com/s2/u/0/favicons?domain=xxxx，那就是一个获取网站favicon 图标的接口，来自谷歌，比如本站的调用代码就是：

http://www.google.com/s2/u/0/favicons?domain=devework.com

但由于大中华局域网的原因，谷歌的接口已经被和谐（事实上上面的链接会跳转到G+ 的子域下，G+ 在天朝，没有的东西），你可以用以下类似接口替换实现：

http://g.etfv.co/http://devework.com

http://api.qianduanblog.com/favicon/?url=http://devework.com

http://www.521php.com/api/fav/?url=devework.com

参考文章：点击查看，感谢原作者。