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!

Share

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

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

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

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

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

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

  8. 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! :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. Michael Martin (1511 comments)23 July 08

    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. Inzpiration (1 comments)25 July 08

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

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

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

  16. Michael Martin (1511 comments)28 July 08

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

  18. Michael Martin (1511 comments)28 July 08

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

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

  20. Alex (13 comments)11 August 08

    Good thing I already have a gravatar.

  21. wow, very useful… good job !

  22. sweeped (1 comments)22 August 08

    Very nice!

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

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

    BRAVO Boy.

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

    Thanks bud,

    Cheers,
    Ajith

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

  27. Zigg (1 comments)4 December 08

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

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

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

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

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

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

  33. Jauhari (11 comments)9 February 09

    Wonderful Tips. Thanks

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

  35. ohbrooke (1 comments)23 February 09

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

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

  37. AIR (2 comments)2 April 09

    Avatar constructor mentioned above works! Quick solution.

  38. air (2 comments)10 April 09

    let me check it

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

  40. diky (1 comments)16 May 09

    where is my avatar?

  41. Gareth (2 comments)2 June 09

    Thanks this post really helped me figure this out.

  42. yy1993 (1 comments)19 July 09

    thanks!

  43. Andrew (9 comments)5 September 09

    your company does nice work. thx for this info…

  44. That blue default gravatar sux. Creating a custom default avatar right now. thanks for the information.

  45. Thank you for this solution. I was struggling with something far more complicated. :)

  46. Dapatkan ebook dan robot forex percuma…jadilah trader forex yang berjaya…byForex Viper

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

  48. Bytetips (2 comments)20 October 09

    Thanks for the information. I made my Avatar and now its working… Woo hoo.. thanks again..

  49. Aha! I got. Thank you.

  50. ana (6 comments)7 January 10

    nice info..

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

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

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

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

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

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

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

  58. shivangyung (1 comments)16 April 10

    cool!!

  59. Monie (1 comments)21 April 10

    Great tips.

  60. Brenda (2 comments)4 May 10

    nice thanks

  61. thx man, nice post !!!

  62. mohd (1 comments)10 May 10

    Thanks Dude!

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

  64. IamDavid (1 comments)21 May 10

    Well what if you do not have <?php echo get_avatar in your comment php?

  65. can (1 comments)1 June 10

    very good thanks

  66. thanx a lot.

  67. Thank you very ! awsome :)

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

  69. Thanks for your tutorial. If I use wp_list_comment (‘avatar_size=48′), How to change the default gravatar? Give your help please…

  70. Bali Charms (1 comments)9 July 10

    nice tutorial, so we can change the default gravatar and personalized gravatar

  71. That’s cool. Thanks..

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

  73. NGTHFONG (1 comments)11 August 10

    Nice post!

  74. Thank you! Great Post!

Leave a Comment

Your reply will be added to the comment above (Below any other replies to this comment) -

(We DoFollow)

Not sure how to get an image with your comment?