Yesterday I checked my blogroll page and discovered that Google’s Favicons cache had completely failed to retrieve any icons. After a quick investigation, I found that the cache service was redirecting entirely to plus.google.com — a domain we all know too well, as it has long been blocked by the Great Firewall, rendering the favicons invisible. To ensure our favicons display properly, here are two solutions.

1. Use a Third-Party Favicon Cache Service

getFavicon offers a fairly comprehensive API that supports both HTTP and HTTPS. However, it caches very few favicons since websites need to submit their own to be cached. API documentation: http://g.etfv.co/

2. Use Websites’ Native Favicons

The favicon.ico file is typically located in a website’s root directory, so what we need to do is iterate through each blogroll link’s /favicon.ico. If a favicon cannot be retrieved, we fall back to a default GIF image.

In your blogroll template (or wherever you need this cache service), locate the content output function and add the following code beneath it. Pay attention to the code comments:

<div class="page-links">
    <h3>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
        // To output links from a specific category, modify the get_bookmarks parameters
        // e.g., 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>

There you have it. Of course, you may want to tweak the CSS to constrain the favicon display size, since default favicons vary in dimensions from site to site.