Many friends keep asking me how the ICO icons are displayed on my blogroll page. I would simply share the image URL with them:

http://www.google.com/s2/favicons?domain=website-url

Today I’m taking some time to write a tutorial on how to create a WordPress blogroll page template with favicon icons. Hope you find it useful.

Demo: https://imzl.com/links

1. Upload a 16×16 image as the default icon for websites that don’t have a favicon.ico. Upload the image to the images directory of your current theme. In this example, the default icon image is links_default.gif.

2. Make a copy of your theme’s page.php and rename it to page-links.php.

3. In page-links.php, find the content output function <?php the_content(); ?>, and add the following code below it. Pay attention to the code comments:

< div class = "page - links" ><h3 >In-Page Links</h3>
<ul>
<?php
$default_ico = get_template_directory_uri().'/images/links_default.gif'; //default ico image path
$bookmarks = get_bookmarks('title_li = &orderby = rand'); //output all links in random order
//If you want to output links from a specific link category, just change the get_bookmarks parameters
//For example, to output links from category ID 5: title_li=&categorize=0&category=5&orderby=rand
if (!empty($bookmarks)) {
    foreach($bookmarks as $bookmark) {
        echo' < li > <img src = "',
        $bookmark - >link_url,
        '/favicon.ico"onerror = "javascript: this.src = \'',
        $default_ico,
        '\'" / ><a href = "',
        $bookmark->link_url,
        '"title = "',
        $bookmark->link_description,
        '"target = "_blank"> ',
        $bookmark->link_name,
        ' </a></li> ';
    }
}?></ul>
</div >

4. To make it look better, you can define some styles for the page-links class. Here’s the CSS I use in my theme for reference:

.page-links{overflow:hidden;margin:0 0 24px;padding:0;}
.page-links h3{border-bottom:1px solid #bfbebe;text-align:center;margin:0;}
.page-links ul{margin:0;padding:5px 0 0 0;}
.page-links ul li{float:left;width:150px;line-height:16px;height:16px;margin:5px 5px 0;padding:0;list-style-type:none;}
.page-links ul li:hover{background:#f2f2f2;}
.page-links ul li img{width:16px;height:16px;margin:0 5px -2px 0;padding:0;border:none;}

5. In the WordPress admin panel, create a new page and select “links” as the page template.

Note: It’s best to upload the ICO icon to the website’s root directory, as this makes it easier for Google to index. In Opera, the ICO icon should also be uploaded to the root directory. The blogroll page on this site uses Google’s built-in ICO icon service, and the URL was provided at the beginning of this article.

If you’d like to understand the underlying principles of the code in this article, you can read this article