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.
- 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.
- 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.
If you don’t have a logo, use the initials of your blog. It works the same.
- Optional. You can add text that says “No Avatar,” to explain why the image is showing up.
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.
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!

Custom Search
Tyler (4 comments)21 July 08
I’ve been using a Grue as my default avatar for ages. It’s gotten tons of positive feedback.
Sumesh (42 comments)21 July 08
Good tutorial. I’ve liked the PSDTuts avatar quite a bit.
Speaking of which, you could also add a small snippet of text saying Get your own avatar at Gravatar.
And I hopoe your design comes out soon.
Niche Store Journey (3 comments)21 July 08
Hey Michael:
Dumb question, I’ve been trying to figure this out.
How do you actually set/use avatars on WP blogs that allow them?
I’ve never seen an actual place to upload/define where to use them.
Grant (14 comments)21 July 08
Great post, I feel it is important in making blogs stand out. It is also a great way to add a nice design touch to your comments and not the same generic gravator.
Nice Work.
Slevi (73 comments)21 July 08
Nice little tut
. I use MBLA still for avatars, so in case there’s no avatar I have it set to show the default Gravatar avatar, if that not available mybloglog default avatar.
redwall_hp (144 comments)21 July 08
New design? You never mentioned a new design…
Nice tutorial, I’m adding it to my Saturday speedlinking post.
infmom (3 comments)21 July 08
You can see my gravatar. It’s my logo. (Created decades before Apple did something similar, btw)
What I’d like to have is instructions for having my blog’s favicon show up as the gravatar for people who haven’t created their own yet.
Michael Martin (1511 comments)22 July 08
Tyler,
Had to Google that! Good idea though.
Sumesh,
Adding text to explain what a Gravatar is is definitely a good idea. I have it in the new design. Might encourage more people to get avatars!
Niche Store Journey (Tyler is easier to type!
),
Check out this page on the Codex. It explains it all.
Grant,
Agreed. Every little customization makes the overall blog more unique.
Slevi,
So long as it’s not the bright blue one with the Gravatar logo!
Redwall,
(Thanks in advance for the link!)
Hehe – I’ve been keeping it quiet. Been at it for almost a month now, but it’s coming on well.
Infmom,
Check out the last section of the post “Setting the Image as the Default.” Follow the advice there, but using your blog’s favicon (You can’t use the favicon file itself though as it’s in *.ico format) as the image.
Chris Spooner (2 comments)22 July 08
Great little trick, I’m going to have to put this into effect on my site, I have too many boring grey heads at the moment!
Michael Martin (1511 comments)23 July 08
Chris,
I’m using a grey square with 4 white lines!
At least your boxes even have heads.
Christopher Clayton (1 comments)23 July 08
ive been looking for somthing like this for ages!!!
now, how would i resize the gravitar?
i want to make it smaller! because the default size looks weird in my new blog (launching in August!)
How to Make Money Online / Greg (1 comments)24 July 08
Thanks for the tip. I have been wanting to do that but did not know how. This will help withbranding the Blog and giving it the identity to seperate it from other blogs.
Inzpiration (1 comments)25 July 08
Hey! this is a great tip! Thanks for sharing!
Very useful.
Mali (1 comments)27 July 08
Hi, Thanks for paying me a visit. Just tried the great little default avatar change works a treat. Thanks
Eating Design
Mali
Adelaide (2 comments)28 July 08
Great post, we have a custom default avatar on our site and it really makes a difference because you can customise it to fit the look and colour scheme of your site. It doesn’t look so badly like oh look this person doesn’t have one!
Michael Martin (1511 comments)28 July 08
Christopher,
(80 is the maximum)
See the number in the get_avatar tag? Change that to whatever size you want
Adelaide,
Cool. I agree. It looks much better.
jusuchin85 (1 comments)28 July 08
thanks for the great tip (will link back to you at my new blogsite; launching Aug 01 2008)!
seems that I cant put too many words in my newly created avatar since i’m just using a size of 64px. but i think it looks great! thanks for the trick again!
Michael Martin (1511 comments)28 July 08
Jusuchin,
Thanks. Good luck with your site. I’ll check back when it launches!
Eleanor (1 comments)5 August 08
Thank you very much for this guide!
I am using comicpress and wanted to put a more cartoon-themed blank gravatar in there – especially since my theme is black and the default gravatar sticks out like a sore thumb.
Alex (13 comments)11 August 08
Good thing I already have a gravatar.
Chili Palmer (1 comments)14 August 08
wow, very useful… good job !
sweeped (1 comments)22 August 08
Very nice!
LoungeKat (1 comments)26 September 08
This is great news, especially for a picky designer such as myself
Rushit Shah (1 comments)27 September 08
All i want to tell you and your blog is :-
BRAVO Boy.
Ajith Edassery (1 comments)14 October 08
Works like a charm! All that I wanted to change was the image size and the cite style!
Thanks bud,
Cheers,
Ajith
Yan Shall Blog (1 comments)24 October 08
Hey Michael
Thanks for the tut. I hope this is not a dumb question. I’m currently using Brian’s Threaded Comment and the only code I see is
php echo get_avatar( $c, $size = '32' );. Can I just add the url after the code?Yan
Zigg (1 comments)4 December 08
Does this work for default admin avatar or for comments only?
koen buysse (2 comments)12 December 08
nice explanation, but I wonder how to dynamically define the default gravatar…
let me explain:
in stead of using:
hht://www.mysite.org/wp-content/themes/mytheme/images/default_gravatar.jpg
is it possible to (in some way) use:
/images/default_gravatar.jpg ?
it would be much more reliable in case of re-using some of the files of other themes…
thanks in advance !
Michael Martin (1511 comments)12 December 08
Koen,
Yep, that should be possible. You’re just passing a value to the get_avatar function, so it will try to work with anything you put in there.
I’m not so sure that dynamic images are a great idea (Why get the server to process more than it has to?), but if you think it would be best for you site, then by all means try it out and let us know if it works please!
koen buysse (2 comments)12 December 08
hey ! thanks, but i’ve found a “solution” to my problem.
in stead of using a static http:// adress to point to the .jpg, and to use a dynamic wordpress synthax like bloginfo template_directory.
i’ve found this:
http://www.kremalicious.com/20.....ment-19570
it adds an extra icon in the admin menu with the rest of the gravatars…
and it works just fine…and it’s dynamic !!!
cheers !
Michael Martin (1511 comments)14 December 08
Ah, glad you’ve solved it now! Thanks for sharing
Mickelodeon (1 comments)28 December 08
Thanks for the great info – I found your site when I was trying to figure out gravatars to begin with and came back when I decided I really didn’t like the default WP choices. Good job and thanks for making it so painless. =)
Patty @ OB Rag (1 comments)3 January 09
Way cool Michael, thanks! This was the simplest solution I found.
And btw, our default gravatar is a grayed out version of the one you see here. I made a few versions in different colors for our blog authors then a gray version for readers who don’t have their own.
Jauhari (11 comments)9 February 09
Wonderful Tips. Thanks
Ricky C (1 comments)14 February 09
Nice tips but you can easily install WP-Gravatar Plugin or use default avatar that were build in with WP 2.7
ohbrooke (1 comments)23 February 09
YES! Thanks! I spent all morning trying to find this solution. Thank You!
ripcurle (1 comments)11 March 09
I have found that the easiest way to create your own avatar from an image is to use this website called avatardr.com.
AIR (2 comments)2 April 09
Avatar constructor mentioned above works! Quick solution.
air (2 comments)10 April 09
let me check it
Rudi (2 comments)11 May 09
Thx man, I’ve search this everywhere
It works
Rudi’s Latest Post: Menambahkan “Thumbnail Picture” Untuk Setiap Post di WordPress
diky (1 comments)16 May 09
where is my avatar?
Gareth (2 comments)2 June 09
Thanks this post really helped me figure this out.
yy1993 (1 comments)19 July 09
thanks!
Andrew (9 comments)5 September 09
your company does nice work. thx for this info…
Event Decor Direct (1 comments)5 September 09
That blue default gravatar sux. Creating a custom default avatar right now. thanks for the information.
Marko Randjelovic (3 comments)16 September 09
Thank you for this solution. I was struggling with something far more complicated.
percuma forex robot (2 comments)27 September 09
Dapatkan ebook dan robot forex percuma…jadilah trader forex yang berjaya…byForex Viper
percuma forex robot (2 comments)27 September 09
Untuk itu, Belajar Forex memahami perlunya sebuah modul edukasi yang tepat guna dan
terarah bagi semua pemula dalam mempelajari forex trading. Dengan demikian
diharapkan para pemula forex tidak lagi kebingungan dan bertanya: “dari mana Saya
harus memulai pelajaran forex Saya?”
Anda juga tidak diwajibkan membeli apa pun dari Belajar Forex. Semuanya benar-benar
gratis. Ya tentu saja Kami sangat mempersilakan jikalau Anda hendak membeli produk-
produk Belajar Forex atau membuka real account bersama Belajar Forex. Belajar Forex
menjamin uang yang Anda keluarkan tidak akan keluar dengan percuma
Dapatkan ebook dan robot forex percuma…jadilah trader forex yang berjaya…byForex Viper
Bytetips (2 comments)20 October 09
Thanks for the information. I made my Avatar and now its working… Woo hoo.. thanks again..
印第安小狮 (1 comments)16 November 09
Aha! I got. Thank you.
ana (6 comments)7 January 10
nice info..
Gretll (1 comments)8 January 10
I do not found that piece of code in my comments template? where else can i find it to give me personal avatar?
Forex (5 comments)21 January 10
Thanks for sharing this useful information. It helps me a lot. I try this for my own Blog. Thank you.
Doug C. (8 comments)5 February 10
Thank you for explaining how to do this. It was exactly what I was looking for. I got it working now on my own site. I had to decide what image to use for my “blank” avatars and I ended up using one of my FatBirds (since they’re my main mascots anywhere I go).
Doug C. (8 comments)5 February 10
Actually I changed my mind on the “blank” avatars – I went with a question mark which ends it a sharpened pencil (much more keeping in line with the pencil in my logo).
Patience (2 comments)5 March 10
Hello I want to use your tutorial by my theme uses this code instead:
it is located in comments.php
I tried to add the other part to the end…but it still did not work… Any suggestions?
Thanks!
Patience (2 comments)5 March 10
Never mind… I used this tut instead…
http://buildinternet.com/2009/.....wordpress/
Pro Blog Design is my # site for wordpress customization
Marco (10 comments)18 March 10
Michael,
is there a way that you share your comments.php and the stylesheet with your readers? There are really no good comments.php templates out there. And the ones that exist, don’t offer the CSS code which makes it kinda useless for newbies… OR they don’t offer nested comments.
Thanks!
shivangyung (1 comments)16 April 10
cool!!
Monie (1 comments)21 April 10
Great tips.
Brenda (2 comments)4 May 10
nice thanks
Mr Jack Mcfreder (1 comments)5 May 10
thx man, nice post !!!
mohd (1 comments)10 May 10
Thanks Dude!
Mark (15 comments)20 May 10
Mine uses the functions to add the avatar.
# Displays the comment authors gravatar if available
function dp_gravatar($size=50, $attributes=”, $author_email=”) {
global $comment, $settings;
if (dp_settings(‘gravatar’)==’enabled’) {
if (empty($author_email)) {
ob_start();
comment_author_email();
$author_email = ob_get_clean();
}
$gravatar_url = ‘http://www.gravatar.com/avatar/’ . md5(strtolower($author_email)) . ‘?s=’ . $size . ‘&d=’ . dp_settings(‘gravatar_fallback’);
?><img src="” /> <?php
}
How do I do it this way as the code you provided also isn't inside comments.php
thanks
}
IamDavid (1 comments)21 May 10
Well what if you do not have <?php echo get_avatar in your comment php?
can (1 comments)1 June 10
very good thanks
teknoloji haber (1 comments)2 June 10
thanx a lot.
Films Twilight (1 comments)19 June 10
Thank you very ! awsome
Mobile Spy (3 comments)23 June 10
Thank you very much for providing step by step guide line for making a default avatar. I learn lot of from you. Your knowledge is appreciative.
Thank you.
SEO aryakumara (1 comments)8 July 10
Thanks for your tutorial. If I use wp_list_comment (‘avatar_size=48′), How to change the default gravatar? Give your help please…
Bali Charms (1 comments)9 July 10
nice tutorial, so we can change the default gravatar and personalized gravatar
Quality Backlinks (2 comments)29 July 10
That’s cool. Thanks..
kevin (40 comments)10 August 10
For those using wp_list_comments(); you can add this in your functions.php file:
add_filter( ‘avatar_defaults’, ‘newgravatar’ );
function newgravatar ($avatar_defaults) {
$myavatar = get_bloginfo(‘template_directory’) . ‘/images/default-avatar.png’;
$avatar_defaults[$myavatar] = “Soulbrasileiro”;
return $avatar_defaults;
}
It’ll add another picture to chose from in the wp admin.
NGTHFONG (1 comments)11 August 10
Nice post!
Hannah Montana (1 comments)22 August 10
Thank you! Great Post!