Ian Hoar – Passion for Technology – Geeking Out - Technology, Web, Toys, Games, Design, Entertainment, Gadgets, & Geeking Out

Gravatars, what are they and how do I get one?

Gravitar LogoA few days ago I added Gravatar functionality to my blog. A Gravatar is a unique picture or icon of yourself which is stored online and globally accessible by blogs that implement Gravatar, or globally recognized avatar. When you post or comment to Gravatar enabled blogs your own avatar will show up on that blog if you have signed up for one on the Gravatar site. It’s a nice way of making your posts more unique and personalized.

GravitarThe other great news is that if you have been posting to a lot of blogs with the same email address and they have Gravatar functionality set up, all your old posts will be updated with your personal Gravatar when you sign up for one. Also, if you have posted to a blog without Gravatars and they add the that functionality in the future, your old posts will then show up with your Gravatar.

How does it work?

Gravatars work by passing a few parameters through the URL to the Gravatar website. You tell the site what you are looking for, send an encrypted email address via MD5 hash along with size, default icon location and border colour. Some of these parameters are optional.

Example Gravatar URL


For people wanting to add Gravatars to their own blog it’s extremely easy with WordPress. There are several ways you can do this. WordPress 2.5 has Gravatar functionality built in by default. You can find out more about this on the WordPress Codex. There are also several plugins that will accomplish this including the official Gravatar WordPress plugin, which is the method I prefer over the built in WordPress functionality and will discuss below.

The reason I like the Gravatar plugin over the default WordPress support is that I find it more flexible. I can use my own image html and use my own CSS class and alt tag right in the HTML theme template. The WordPress Gravatar support generates the image HTML for you automatically and you can use the included class to style it.

Using the WordPress Gravatar Plugin

<img src="<?php gravatar("R", 40, "http://www.ianhoar.com/gravatar_default.gif"); ?>" class="gravatar" alt="<?php comment_author(); ?>" />
  • The first parameter in the gravatar() function sets your rating. Gravatars have G, PG, R and X ratings. This setting allows you to set what kind of avatars you want to allow on your blog.
  • The second parameter sets your size. In this case 40 x 40 pixels (the default is 80 x 80 pixels).
  • The third sets the path for a default avatar if a user does not have a Gravatar.
  • There is also a fourth parameter that allows you to set a 1px colour boarder. I prefer to use a custom class for this within the image markup itself.
  • I’ve also set the users name as the alt tag for each Gravatar with the comment_author() function.

What if I don’t have WordPress?

You are probably in luck, the Gravatar website has detailed instructions on the Gravatar URL and other plugins for several blogging platforms. You can find a complete list in the Gravatar implementor’s guide.

Scroll down to see my first comment on this article and you will see my Gravatar in action. If you are a blog reader and you post a lot, why not get your own Gravatar today? Feel free to come back here and try it out in the comments section below.

2 Comments to “Gravatars, what are they and how do I get one?”

  • Ian Hoar

    To the left of my post is an example of my Gravatar in action. This same icon will display on other Gravatar enabled blogs and if I update the icon at a later date it will be globally updated wherever I have posted.

  • Mike

    The Gravatar is a great example of where standards in an open community make sense – and save time. Each site is different, but you have a common link now, when you post comments. Someone that becomes a prolific or insightful poster can keep the same “identity” and be more easily recognized across the internet.

    I’m still looking at how to properly optimize images (Make sure you’ve got a good quality, square aspect ratio).

    It’s a great, free standard.