让连接自动获取Favicon

哎，我为了这东西也算是呕心沥血了╯﹏╰
先来说下历程吧！

最早我想到的方法，就是直接输入网址/favicon.ico的方式用img来插入图片，可是如果对方根本没上传ico或者不是放在根目录的话，那就获取不到了，其实是很麻烦的。
于是我就去搜索，中途找到了WP直接有插件可以实现，忍不住羡慕嫉妒了下。然后乖乖的继续找，在选择不用WP的时候就该有这个准备了=w=自己动手丰衣足食！
之后我就搜索到了一个叫GetFavicon的网站，然后就按照网站上的方法把我书签里的所有连接一个一个加上了图标，简直可以说是最蠢的办法了。但我当时也没想到可以用其他方法，毕竟我不会写代码啊@_@

可是今天我在找日志分页的方法的时候找到了这么一个网站！！！点我。
才发现原来google好像有一个可以自动获取ico图标的方式（貌似WP插件也是利用了这个方法），具体方法连接页面里说了。简而言之，就是google会搜索那个网站里面有没上传ico，即便不在根目录也行！这样就可以免去在连接页面一个个写ico代码的麻烦又不用担心对方有没上传ico了，只要添加js代码就可以自动给你定义的标签内的连接获取ico！多方便啊！
PS GetFavicon的方式也是一样的！只是在应用方面，一个需要手动输入，一个是通过JQuery来实现自动获取。

本来直接用google的就也好了！可是大家都知道，google在天朝是一个特殊的存在！偶尔访问很慢，后者干脆无法访问。所以我又愁了，可不可以不通过google，而用我之前找到的GetFavicon来获取ico呢。
然后我就自己试了下，好像真的可以哎！！！于是我来记录下方法！！嗯！

先要加载一个JQuery。我习惯用百度的，在天朝速度快不容易挂╯﹏╰
你可以选择下载文件放在自己的网站里=w=

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

然后就是在head里面写JS代码了，也可以写在一个js文件里，head里添加如上面代码差不多类型的加载下js文件就好。

<script type="text/javascript">
jQuery(document).ready(function($){
$(".post-link li a").each(function(e){
$(this).prepend("<img src=http://g.soz.im/http://"+this.href.replace(/^(http:\/\/[^\/]+).*$/,'$1').replace( 'http://', '' )+"/cdn.ico?defaulticon=默认ico>");
});
});
</script>

具体代码如上。

中间有几个地方得要替换下，首先就是你要添加ico的标签属性，也就是class啦，当然id也是可以。
在上面的代码里找到.post-link li，换成任何你自己设置的就行。添加连接的时候记得加上这个class。还要记得在css里面设置好这个class或id的属性，再加一个post-link li img来设置图标ico的排版，譬如说宽高、边框、距离etc。
搜索到的代码里是把css属性直接写在了JS里面，我个人习惯css归css，所以被我看到了我就稍微做了下修改。

还有就是默认ICO的设置了。
所谓默认ico就是说对方的所有文件目录里都没有上传ico的情况下显示的。可以自己准备一个符合自己网站风格的图标然后用从http开头的地址替换掉“默认ico”这几个词就可以了。
当然如果嫌麻烦，就把?DEFAULTICON=默认ICO这句话删掉即可。因为GetFavicon已经提供了默认ico图标，不介意的同学可以使用该网站所提供的。

好啦，到此全部设置完毕！！！以后加连接的时候就不需要每个连接都写上一句获取ico的代码了，省心省力啊！

其实我就是个搬运工，直接按照这个网站的方法也是可以显示的！！！我就是把google换掉了而已！！
然后我不会写代码，我只会照样画葫芦233
这日志就是记录一下，顺便有需要的同学随便拿走啊！！！稍微会写点html和css的人应该就能懂吧？我的表达能力比较一般，好怕有人看不懂……但是我想，看代码应该就都懂了吧？

特别感谢：博客吧 GetFavicon