简单生活,点滴记录
Eking

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+).*$/, '$1').replace
( 'http://', '')+" style=float:left;padding:5px;>"); }); });
</script>

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

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

注:其中要特别感谢:ben-labEffie'sGetFavicon


  1. /
2015年09月16日
  • 尹先生 不错 不错,尹先生是一位极简主义者,表示暂时不用=-=我先收藏了
  • JOO 路过
  • Eking 作者 回复 JOO 兄弟,常来啊!
  • 小F 天呐我竟然看到了我的博客QAQ 那个,前几天我把域名更改了下。前缀的blog变成note了…… (我还在震惊当中……)
  • eking 作者 回复 小F 还真没注意到,已经做了更改。