在链接前面自动添加favicon 图标(jquery)

在链接前面自动添加favicon 图标(jquery)

相信你在一些网站上看过类似的东东,就是在一个可点击外链左侧,会有一个目标链接网站的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

参考文章:点击查看,感谢原作者。

评分:
3.40 avg. rating (72% score) - 5 votes
云左主机 广告
4 条 评论
  1. 有没有办法给favicon限制下宽高啊?

    回复
  2. 玉慕瑕

    百度的呢?百度不是最和谐最靠谱的么?

    回复
    • 百度有相关接口?我怎么不知道的。。

      回复
发表评论