Add Website Favicons to Your WordPress Comments in 5 Minutes

Anybody who has been following my website will know that I like to use free services to reduce my development time wherever possible - and this post is no exception. I am going to show you how to use a little known Google service to find the favicon for a specific website and then use that favicon on the trackbacks of your blog.

What is a favicon?

A favicon is the tiny icon you can see in the url bar at the top of your web browser. Most websites have one as it creates a simple recognisable way to distinguish your site from otheres. With the proliferation of tabbed browsing this has become even more important as the icons show on tabs and give a very quick way to tell what content is on which tab.

How can I use this in WordPress?

The first place I thought to use this was in the WordPress theme I created with Darren called Accumulo. This is a content aggregator that reads feeds from different websites and displays them on the homepage. But then I realised an even better place. In the trackbacks and pingbacks on your blog comments.

These areas are often a collection of links showing the websites that are linking to you, so making them look pretty is a nice way to distinguish the sites. So I opened up the Elemental templates and added some code to the theme, and now all Elemental websites will have favicons next to the trackbacks and pingbacks that are sent to the site. You can see an example of this on one of my older posts.

How to get the favicon?

Thanks to a tip from pisanojm on the Pro Theme Design forums I found out that there's a url you can access on Google.com that will give you the favicon for the requested website.

http://www.google.com/s2/favicons?domain=www.binarymoon.co.uk

So to use this in your theme I created a little function that you can place in functions.php:

function bm_getFavion ($url = '') {
	if ($url != '') {
		$url = parse_url($url);
	}
	$url = 'http://www.google.com/s2/favicons?domain=' . $url['host'];
	return $url;
}

Why doesn't my favicon display?

There are a few different ways to embed a favicon into a web page and it seems Google does not recognise all of them. The best way to get the icon to display is to place the icon in your website root, and to include the favicon using the following HTML.

<link rel="shortcut icon" href="/favicon.png" />

Where to use them?

It's all very well working out the path to the image, but what would you use it for on a WordPress blog?

On Accumulo I am using this code to pull in the blog icons for the different feeds being displayed on the homepage. On Binary Moon, and in Elemental, I am using it to display favicons for the trackbacks in the comments. You can see an example in the trackbacks for my recent post on the WordPress query_post command.

To do this you simply have to edit your comments display callback function and add in the image url to the front of the trackbacks... which is easier said than understood.