Skip to content

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.

Ben View All

Ben is a lifelong Nintendo fan who also likes to build websites, and develop games. He also buys way too much Lego.

7 thoughts on “Add Website Favicons to Your WordPress Comments in 5 Minutes Leave a comment

  1. You have given a very good information. thanks for sharing. A favicon is really important for a website, It represents your unique corporate image. Well, this is the part of web development, but its good to know about it in an easy way.

  2. Pingback: What do you want me to write about?
  3. Appreciate the post, Ben. I was actually looking for an idea close to this but anyway, I think adding the favicon to the comments section is a much better idea. Sorry to run away with this but I’ll be implementing soon in some of the existing blogs that I have. 🙂 Love your site, btw.

    • Awesome that you like the idea 🙂 Use this as much as you like. To be honest I am surprised more people don’t do this sort of thing with trackbacks. To me it makes perfect sense, and makes the website look a lot more attractive, and the trackbacks more easily distinguishable. Win win if you ask me

    • I think trackbacks are good for showing appreciation to people who link to you. They are also useful personally to see what websites are saying about your own site. I like the idea of creating an interconnected web of pages and this is a nice automated way of doing it.

Leave a Reply

Your email address will not be published. Required fields are marked *