使用jQuery插件FavoriteIcon给链接旁边增加一个网页小图标

一般的网站都有网页favicon小图标，Favicon是favorites icon的缩写，亦被称为website icon（网页图标）、page icon（页面图标）或urlicon（URL图标）。Favicon是与某个网站或网页向关联的图标。使用jQuery插件FavoriteIcon可实现一个给链接旁边增加一个网页图标的功能，如链接到谷歌，那么在链接的后面显示谷歌网页图标，使用非常简单，效果图如下：

使用说明
需要使用jQuery库文件和FavoriteIcon库文件

使用实例
一，包含文件部分

1. <script src="jquery-1.3.2.min.js" type="text/javascript"></script>
2. <script src="jquery.favoriteIcon.js" type="text/javascript"></script>

二，HTML部分

1. <ul>
2. <li><a href="http://www.google.com">谷歌</a></li>
3. <li><a href="http://www.wikipedia.org">维基百科</a></li>
4. <li><a href="http://www.sina.com.cn">新浪网</a></li>
5. <li><a href="http://www.biuuu.com">必优博客</a>[目前没有网页图标，所以没有显示]</li>
6. <li><a href="http://www.baidu.com">百度</a></li>
7. </ul>

三，Javascript部分

1. <script type="text/javascript">
2. $(document).ready(function() {
3. $("a").favoriteIcon({ iconClass : 'favoriteIcon' });
4. });
5. </script>

如上实例，使用favoriteIcon插件非常简单，直接给所有的链接后增加了一个网站相应的网页图标，favoriteIcon的JS源代码其实也很简单，如下：

1. (function($){
2. $.fn.favoriteIcon = function(options) {
3. var defaults = {
4. iconClass    : 'favoriteIcon',
5. insertMethod : 'appendTo',
6. iconSearched : 'favicon.ico'
7. };
8. var options = $.extend(defaults, options);
9. $(this).filter(function(){
10. return this.hostname && this.hostname !== location.hostname;
11. }).each(function() {
12. var link = jQuery(this);
13. var faviconURL = link.attr('href').replace(/^(http:\/\/[^\/]+).*$/, '$1')+'/'+options.iconSearched;
14. var faviconIMG = jQuery('<img class="'+options.iconClass+'" src="" alt="" />')[options.insertMethod](link);
15. var extImg = new Image();
16. extImg.src = faviconURL;
17. if (extImg.complete)
18. faviconIMG.attr('src', faviconURL);
19. else
20. extImg.onload = function() { faviconIMG.attr('src', faviconURL); };
21. });
22. }
23. })(jQuery);

其原理是根椐当前的链接网址，生成一个当前链接的网页图标地址，然后再追加到链接元素中<a></a>中间，具体大家可查看favoriteIcon的JS源代码。

点我下载favoriteIcon实例源代码
http://jquerycodes.googlecode.com/files/favicon.rar