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

6,230
在链接前面自动添加favicon 图标(jquery)
  • 3.40 / 5 5
3.40分(5票)
在链接前面自动添加favicon 图标(jquery)

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

演示

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

教程

先献上代码:
html:

1
2
3
4
5
	<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:

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

jquery:

1
2
3
4
5
6
$("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

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

喵~本文目前有4条留言,欢迎发表评论!

  1. 板凳也不错
    :

    有没有办法给favicon限制下宽高啊?

    [回复]
  2. 传说中的沙发
    :

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

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

      [回复]

打破沉默,我来发表评论鸟~