通过Google获取站点的Favicon

在一些在线订阅网站订阅RSS时，都会显示被订阅网站的Favicon。Google很早就有提供一些这类的小工具，比如获取站点的Favicon，圆角图片生成代码等等，以前一直没有在Blog上记录，今天看到冰糖橙子的网站上面有提供一段js代码，于是想着还是记录下来的好。

本范例是使用jQuery来获取Google的Favicon缓存，如果有获取到该网站的Favicon则显示，如没有获取到，则会显示一个地球图标。

<script language="javascript">
$(document).ready(function(){
$("ins.favicon").each(function(){
var _url = $(this).attr("rel").replace(/^(http:\/\/[^\/]+).*$/, '$1').replace( 'http://', '' );
var _imgurl = "http://www.google.com/s2/favicons?domain=" + _url;
$(this).css({'background-image':'url("'+_imgurl+'")'})
});
});
</script>

以下是相应的CSS以及HTML代码：

<style>
ins.favicon {
display: inline-block;
display: -moz-inline-stack;
*display: inline;
zoom: 1;
height: 16px;
width: 16px;
background-position: 50% 50%;
background-repeat: no-repeat;
margin-right: 5px;
vertical-align: middle;
}
</style>
<ul>
<li><ins class="favicon" rel="//www.45eggs.com"></ins>肆无忌惮</li>
<li><ins class="favicon" rel="http://www.lhxgh.com"></ins>龙海祥盖好</li>
</ul>

范例如下：

肆无忌惮
龙海祥盖好

通过Google获取站点的Favicon

相关