友情链接获取Favicon图标

9年前•笔记

4601 5

Favicon，就是网址前的那个小图标，在我这个博客可以看到效果。

获取Favicon图标实现原理：　

获得每个友情链接的地址，提取出域名部分，提交给 Google，Google 返回的就是一个16×16的 PNG 图片，对于没有被 Google 缓存 Favicon 的网站，会得到一个小地球的蓝色图标。

　　这个是在网上找到的，是通过JQuery来实现自动获取的。JQuery，网上常见的有google的和新浪的，但试了多次，都没有成功。后来看到这篇文章，才见到效果。

Typecho 友情链接获取Favico图标的具体方法如下：

　　1.先检查自己的Typecho博客主题是否有加载jQuery库，通常是在header.php文件的<head></head>之间，如果没有就把下面代码添加到<head></head>之间

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

　　2.到Typecho后台创建一个友情链接页面，如果你安装了编辑器插件，请切换到html模式，然后粘贴下面的代码：

<div id="youlian">  
<li><a href="http://友链.com" target="_blank">名字</a></li>  
<li><a href="http://友链.com" target="_blank">名字</a></li  
<li><a href="http://友链.com" target="_blank">名字</a></li>  
<!--按以上格式循环添加；如果你用了Hanny的友情链接插件，那么上面一段li可以替换成<links></links>-->  
<script type="text/javascript"> ///友情链接图标favicon  
jQuery(document).ready(function($){ $("#youlian li a").each(function(e){  
$(this).prepend("<img src=http://g.soz.im/http://"+this.href.replace
(/^(http:\/\/[^\/]+).*$/, '$1').replace
( 'http://', '')+" style=float:left;padding:5px;>"); }); }); 
</script>

　　当然，你也可以制作一个模板来实现。需要注意的是，中间有几个地方得要替换下，首先就是你要添加ico的标签属性，也就是class啦，当然id也是可以。
在上面的代码里找到< div id="youlian">和 #youlian li a，换成任何你自己设置的就行。

　　3.保存文件，刷新友情链接的页面，是显示了友情链接网站的Favicon图标吧！！

注：其中要特别感谢：ben-lab、Effie's、GetFavicon

链接 Favicon

最后更新 2017-12-18