注意到陌小雨下面的友情链接了么，前面有个美美的图标，五彩冰粉的，这些都是博友的favicon图标呢？是不是觉得很高大上，今天就分享如何给WordPress友情链接添加favicon图标。效果图：

1.、上传一个 16×16 大小的图片作为还没有设置favicon.ico图标的网站默认ico，把图片上传到所用主题的 images 目录下，这里示例中默 ico 图片是 favicon.ico，图标格式无所谓啦，png、gif、ico喜欢哪个就选哪个。

2.、在你需要调用友情链接的地方，复制下面的代码就可以啦

<ul>
 <?php
 $default_ico = get_template_directory_uri().'/images/favicon.ico'; 
 $bookmarks = get_bookmarks('title_li=&orderby=rand&categorize=0&category=57'); 
 >
 <?php if(!empty($bookmarks)): >
 <?php foreach ($bookmarks as $bookmark): > 
 <li>
 <img src="<?php echo $bookmark->link_url >/favicon.ico" alt="<?php echo $bookmark->link_name >" onerror="javascript:this.src='<?php echo $default_ico; ?>'">
 <a href="<?php echo $bookmark->link_url >"><?php echo $bookmark->link_name ></a>
 </li>
 <?php endforeach >
 <?php endif ;>
 </ul>

代码解释：第四行调用的是连接分类目录id为57下的所有链接，并随机在前台显示，因为陌小雨的淘宝客网站大全收录了很多网站，所以友情链接也建立了好多好多个分类目录呢。

3、分享陌小雨正在使用的css样式：

.item li{display:inline-block;width:30%;height: 26px;;white-space:nowrap;*display:inline;*zoom:1}
.item a:hover{color:#ff8502;text-decoration:none}
.item li img{width:16px;height:16px;margin:0 5px -2px 0;padding:0;border:none;}

上面的.item为第一个步骤的父容器，如果不明白是啥意思，就跟着陌小雨学学xhtml+css的基础课程吧！

4、布置完你会发现，这些链接都是在当前窗口打开的，很不友好，那么如何在新窗口打开这些链接呢？

我们只需要在第1个步骤第10行做一点小小的修改就好啦！修改为下面的：

 <a target="_blank" href="<?php echo $bookmark->link_url >"><?php echo $bookmark->link_name ></a>

2017-8-17日更新

如果不喜欢设置默认的图标，可以调用外部的api，将第二步的代码修改为：

<ul>
 <?php
 $bookmarks = get_bookmarks('title_li=&orderby=rand&categorize=0&category=57'); 
 ?>
 <?php if(!empty($bookmarks)): ?>
 <?php foreach ($bookmarks as $bookmark): ?>
 
 <li>
 <img src="<?php echo $bookmark->link_url ?>/favicon.ico" alt="<?php echo $bookmark->link_name ?>" onerror="javascript:this.src='https://api.byi.pw/favicon/url=<?php echo $bookmark->link_url; ?>'">
 <a target="_blank" href="<?php echo $bookmark->link_url ?>"><?php echo $bookmark->link_name ?></a>
 </li>
 <?php endforeach ?>
 <?php endif ;?>
 </ul>