How To Make Your Own Default Avatar in 5 Minutes

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!

About the Author - Michael Martin is the founder of Pro Blog Design. He works as a freelance web designer, loves WordPress, and has an unhealthy addiction to smilies. Written on 21st July 2008.

Other posts tagged with , , , .

Comments

42 Comments

  1. I've been using a Grue as my default avatar for ages. It's gotten tons of positive feedback.

  2. 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. :)

  3. 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.

  4. 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.

  5. 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.

  6. New design? You never mentioned a new design...

    Nice tutorial, I'm adding it to my Saturday speedlinking post.

  7. 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.

  8. 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! :P ),
    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! :D

    Redwall,
    Hehe - I've been keeping it quiet. Been at it for almost a month now, but it's coming on well. :D (Thanks in advance for the link!)

    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.

  9. 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!

  10. Chris,
    At least your boxes even have heads. :D I'm using a grey square with 4 white lines!

  11. 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!)

  12. 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.

  13. Hey! this is a great tip! Thanks for sharing! ;) Very useful.

  14. Hi, Thanks for paying me a visit. Just tried the great little default avatar change works a treat. Thanks

    Eating Design
    Mali

  15. 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!

  16. Christopher,
    See the number in the get_avatar tag? Change that to whatever size you want :) (80 is the maximum)

    Adelaide,
    Cool. I agree. It looks much better. :D

  17. 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!

  18. Jusuchin,
    Thanks. Good luck with your site. I'll check back when it launches! :)

  19. 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.

  20. Good thing I already have a gravatar.

  21. wow, very useful... good job !

  22. This is great news, especially for a picky designer such as myself :)

  23. All i want to tell you and your blog is :-

    BRAVO Boy.

  24. Works like a charm! All that I wanted to change was the image size and the cite style!

    Thanks bud,

    Cheers,
    Ajith

  25. 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

  26. Does this work for default admin avatar or for comments only?

  27. 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 !

  28. 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! :D

  29. 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 !

  30. 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. =)

  31. 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.

  32. Wonderful Tips. Thanks

  33. Nice tips but you can easily install WP-Gravatar Plugin or use default avatar that were build in with WP 2.7

  34. YES! Thanks! I spent all morning trying to find this solution. Thank You!

  35. I have found that the easiest way to create your own avatar from an image is to use this website called avatardr.com.

  36. Avatar constructor mentioned above works! Quick solution.

  37. let me check it

  38. Thx man, I've search this everywhere
    It works :)

    Rudi’s Latest Post: Menambahkan “Thumbnail Picture” Untuk Setiap Post di Wordpress

  39. where is my avatar?

  40. Thanks this post really helped me figure this out.

Leave a Comment

Not sure how to get an image with your comment?

Link to your latest post? (If possible)