gravatars Thousands of blogs show avatars next to their user’s comments. The avatars are a great way to make things more personal and create some variety between the different comments.

But there are always people who don’t have an avatar. The result is usually a stack of default gray avatars. The same gray avatar you see on every other blog with Gravatars

It only takes a few minutes to make your own, branded avatar.

3 Steps To Make An Avatar

Open up your favorite graphics program and run through these steps.

  1. Draw a box 80px by 80px (Or whatever size your avatar is). Fill the box with a color that is slightly darker than the background color of your comments area.

    This will help it blend in more. When the image is going to appear a dozen times on the page, the less noticeable it is, the better!

    As an example, here you can see the background of my (upcoming) comments section, the border that will go around all of the avatars, and the color I’ve chosen for the default avatar is in the center.

    grav1

  2. Paste your logo into the box. Take away the color, and then re-color the logo using shades slightly darker than the background of the box. Also try lowering the visibility of the layer, to make the image more faint. The more subtle the effect is, the less likely it is to draw attention.

    grav2

    If you don’t have a logo, use the initials of your blog. It works the same.

    grav4

  3. Optional. You can add text that says “No Avatar,” to explain why the image is showing up.

    grav3

    You could even write “Gravatar.com” (Or MyBlogLog.com) on it to help users figure out how to get one. After all, if the user doesn’t have a Gravatar, there’s a good chance that they don’t know what a Gravatar is in the first place.

    grav5

Setting The Image as the Default

If you use a plugin to add avatars to your blog, there is like to be a setting in the plugin’s options page for choosing the default avatar.

If you use WordPress 2.5+, you probably use a template tag like the following for your avatars.

<?php echo get_avatar( $comment, 32 ); ?>

Just add a comma after the 32 (The pixel size of the image, if you want to change that while you’re at it!), and paste in the URL to your image. e.g.

<?php echo get_avatar( $comment, 48, 'http://www.problogdesign.com/wp-content/themes/pro-blog-design/images/pbd_noavatar.png'); ?>

Now the comments on your posts will have a much nicer image that draws less attention, promotes recognition of your logo, and as so few blogs have a unique default avatar, it shows your attention to detail.

What image do you use as your default?

PS – You’ll see the avatar above in use in my new design, due in about two weeks!

Enjoy this post? You should follow me on Twitter!