Skip navigation

Adding Avatars and Gravatars to Your WordPress and WordPress.com Blog

Avatars, or the well known Gravatars, are tiny images, often called your online identity, picture, badge, logo, or graphic image which represent you and/or your blog. Some use photographs of their face or body, or a body part like an eye, nose, or hand. Others use pictures of animals, flowers, scenics, or graphic images. Many professional bloggers use their logo.

Many people like to see these graphic representatives of their blog next to their comments, or now, with the new addition of avatars and Gravatars to WordPress.com, in their WordPress Administration Dashboard listing of the top posts, My Comments comment follow panel, and on the Comments Panel, as well as within the comments of many WordPress Themes.

Adding Gravatars to WordPress and WordPress.com Blogs

When Automattic bought Gravatar, they updated the infrastructure to speed things up and updated the Gravatar WordPress Plugin.

Then Gravatars support was enabled for all WordPress.com users. Those with a Gravatar attached to their email will see their Gravatar image appearing on all WordPress.com blogs, as soon as they finish enabling all WordPress.com Themes.

WordPress.com User, Your Profile Panel Avatar upload bloggers can add an avatar image to their blog by going to the Users > Your Profile panel. In a box currently on the left side is where to upload your image. The image should be no bigger than 128 pixels, though 80 pixels square is the standard. The image must withstand “shrinkage” down to 16 pixels, the size that appears on the Administration Panels Dashboard.

If you would like to add Gravatars to your blog, begin by registering a Gravatar image on the Gravatars site by signing up and submitting an image. Then follow the user’s guide which includes how to enable Gravatars on your blogging platform or program.

WordPress users can use the Gravatar WordPress Plugin from the Gravatars site, or chose from the Easy Gravatars WordPress Plugin or WordPress Gravatar Plugin by Il Filosofo. Both have excellent features and customization.

How Do I Make My Avatar/Gravatar?

80 pixel square boxYour avatar or Gravatar comes in only one size when uploaded. Traditionally it is 80 pixels square, but Automattic has stated that they want to increase the base size to 128 pixels. The key to creating a useful avatar is that it must be “shrinkable”. It must have the ability to remain viable and visible down to its smallest size usage.

Avatars on the My Comments Panel of WordPress.com blogsAvatars on the WordPress.com Comments PanelOn most blogs, the comments area features an 80 pixels square image. On the WordPress.com Administration Panels, the image varies from 48 pixels on the My Comments panel, 32 pixels on the Comments Panel, then shrinks down to 16 pixels on the Top Posts list on the Dashboard Panel.

Avatars in the Top Post Lists on the WordPress Administration Dashboard panel

On the front page of the site, the avatar images are 128 pixels and 48 pixels for the top blog posts listings. On the Blogs of the Day on WordPress.com site which tracks the most popular blog posts and blogs on WordPress.com, the avatars for the most popular posts are 96 pixels square.

That’s a lot of flexibility for such a small image.

Here is an example of four sizes of my avatar for . The first one is 128 pixels, then 80 pixels, 32 pixels, and finally 16 pixels.

Avatar 128 pixel of Lorelle on WordPress logoAvatar 80px Lorelle on WordPress logoAvatar 32px Lorelle on WordPress logoAvatar 16px Lorelle on WordPress logo

As you can see, the image is clear at 128 and 80 pixels, but the image quality drops to nothing as it gets smaller. Only the color is retained. This test makes me reconsider the avatar graphic, don’t you think? Then how often is my avatar going to be in the top 10 blog posts lists and the 16 pixel size used? Hmm?

Many use a flower or body part. Let’s take this photograph of a flower by my husband, , and run it through it’s shrinkage as an avatar.

Avatar 128 pixel of a flowerAvatar 80px FlowerAvatar 16px flower

There is enough contrast in the colors and shapes for the image to hold to the small size, though it looks like a button rather than a flower a the smallest size. High contrast between the foreground and background colors helps hold the image through the shrinkage process.

Using another photograph of an orangutan by Brent, let’s see how an animal image, especially a face, handles the reduction in size that an avatar undergoes.

Avatar 128 pixel of an orangutanAvatar 80px orangutanAvatar of an orangutan at 32 pixelsAvatar 16px orangutan

The facial features are lost at the smallest size, but it does hold most of the way down. The sparkles in the eyes, called the catch light, keeps the focus on the eyes and facial recognition possible even at the smallest sizes.

Using a graphic, especially a simple, high color and tone contrast design, holds all the way down to the smallest 16 pixel size.

Avatar of a graphic at 128 pixelsAvatar 80px graphicAvatar 16px Graphic Image

From these examples, it’s clear to see that an avatar image with good contrast between the background and the foreground subject, uncluttered and simple will reduce down better than a busy, dark image. An avatar image can be anything, but it must be shrinkable.

Related Articles



Site Search Tags: , , , , , , , , , ,
Feed on Lorelle on WordPress Subscribe Feedburner iconVia Feedburner Subscribe by Email

Copyright Lorelle VanFossen, and author of Blogging Tips, What Bloggers Won't Tell You About Blogging.

40 Comments

  1. Posted December 31, 2007 at 5:26 am | Permalink

    lorelle, with regards to the plugin, it says version 1.2, does it support 2.3 now?

    i am using gravatars 2 plugin but would not hesitate to switch if there is an up to date official plugin for gravatars. don’t get me wrong, gravatars 2 is a great plugin to use, very simple and it is successfully integrated into my theme but i would definitely prefer something which is official.

  2. Posted December 31, 2007 at 5:36 am | Permalink

    Thank You for this know-how! :)

  3. Posted December 31, 2007 at 7:26 am | Permalink

    Thank you :)

  4. Posted December 31, 2007 at 8:22 am | Permalink

    Love that, really useful and informative.

  5. Posted December 31, 2007 at 8:31 am | Permalink

    Can wordpress.com gravatars now be seen in wordpress.org blogs, using those plugins?

  6. Posted December 31, 2007 at 8:44 am | Permalink

    I think that it is worth mentioning two alternatives to Gravatars - Wavatars and MonsterID. Both are very easy to integrate to a theme and I think have the primary advantage over Gravatars that they are generated and stored locally, so you arent dependent on the servers at Automattic (reliability and speed).

  7. Posted December 31, 2007 at 9:54 am | Permalink

    Hello Lorelle,

    I am using a plugin that only show gravatar but my commentator seems not having an gravatar so it will only show the gravatar default image. how can i change to combine avatar and gravatar?

  8. Posted December 31, 2007 at 10:14 am | Permalink

    I host WP on my own domain and so I wanted a mixed solution, and I found it! I use Comvatars. It combines the best of all worlds. You can host your own avatars, use Gravatars or Favatars or all three! I choose all of them together and they work great. If the user doesn’t have a site-personal avatar it looks for a Gravatar, and if that fails it looks for the fav icon from their website. Lastly, if nothing can be found it uses an anoymous avatar from my unidentified section. I love it!

  9. Posted December 31, 2007 at 10:55 am | Permalink

    Good article, I found this to be true.

  10. Posted December 31, 2007 at 11:33 am | Permalink

    Very nifty. I’ll have to remember this for when I move my bloggy to wordpress in April.

  11. Posted December 31, 2007 at 12:21 pm | Permalink

    Funny, cause I just installed Gravatars yesterday. I used to have them installed before, but after I changed themes I never added the feature.

  12. Posted December 31, 2007 at 2:47 pm | Permalink

    @ Darran:

    As for which version which Plugin supports, you’ll have to check the Plugin author’s blog for updated information.

    jonathan hickman: There are no WordPress.org blogs. There is the WordPress blog program you can download from there and install on your own self-hosted site. Then you could use the various Plugins.

    If you mean can the avatars used on WordPress.com blogs be seen through the Gravatars Plugins on non-WordPress.com blogs, I’m still waiting for an answer on that, but I believe so.

    Aizat: There have been mention in the comments here of Plugins which will work with other avatar systems including Gravatars, so try those to get as many avatars as you can on your blog.

  13. Posted December 31, 2007 at 6:55 pm | Permalink

    I tend to call self-hosted WP blogs “WordPress.org” blogs, to differentiate from wp.com blogs, although I know that’s not entirely accurate. Sorry about that.

    I’ve now tried easy gravatar and haven’t had any luck getting WP.com avatars to show up. If anybody else has any better luck, let me know!

  14. Posted January 1, 2008 at 4:03 am | Permalink

    I believe that as long as your avatar/Gravatar lins back through the Gravatar service, your picture should show up on any Gravatar enabled blog or page.

  15. Posted January 1, 2008 at 12:40 pm | Permalink

    Thanks for the info. Been trying to get gravatars to work for a while on my site. Hopefully with your information I’ll get it working :D

  16. Posted January 1, 2008 at 3:30 pm | Permalink

    :-) Thank you!

  17. Posted January 1, 2008 at 9:00 pm | Permalink

    Thx for info .. it’s awesome!

  18. Posted January 3, 2008 at 1:10 am | Permalink

    I don’t know about the problem, but that in some wordpress (.org) blogs, gravatars don’t show up even though it’s enabled in their sites.

  19. Posted January 3, 2008 at 8:53 am | Permalink

    Nice ;D
    gravatar should come integrated with wp.org ;D

  20. johnnymestizo
    Posted January 3, 2008 at 5:34 pm | Permalink

    Your step by step guide finally helped me get gravatars working for my site! So happy. WordPress tutes and the gravatar plugin readme didnt seem to do it for me. So a MASSIF thanks to you Lorelle!!

  21. Posted January 4, 2008 at 10:41 am | Permalink

    I’m fairly new into blogging and would like to enable avatars on my site. I installed the Easy Gravatar Plugin successfully. You mention in the post above that you can change your avatar by going to… “Users > Your Profile panel. In a box currently on the left side is where to upload your image.” I see no box on my WP admin. Where is this?

  22. Posted January 4, 2008 at 10:46 am | Permalink

    Ok… I see now that my image is in the GLOBAL (wordpress.com hosted) site. How can I make this work in my locally installed copy? Further, is there a way to opt-in users on my blog? I see that when I visit yours (again hosted at wp.com) there is a top iframe showing my credentials. Again, I’m new at this but learn quickly… thanks for any pointer. I like this feature.

  23. Posted January 4, 2008 at 12:20 pm | Permalink

    @ osaez:

    If your commenters have a Gravatar account, their image will appear in your comments when using a Gravatars Plugin. To make it work, I’m sure you’ve found the panel added by the Plugin by now. There is no way to “opt-in” blog users other than to provide them with a link to get their own.

  24. Posted January 5, 2008 at 7:59 am | Permalink

    I can’t get the plugin to work on my wp.org site. I have it installed and activated and they ask me to put the snipet of code to call it () in the comment loop. When I add it, all I get is a URL pasted on the page. I’m not sure where to place that code gravater is giving me. Any suggestions?

  25. Posted January 5, 2008 at 2:57 pm | Permalink

    Hello,
    I’ve just added my avatar a couple of days ago and I really really hate what it looks like in Netvibes now with the avatar. The FAQ say that you cannot suppress your avatar. Is it absolutely true ? Because I’m currently contemplating starting a new blog to avoid this inconvenience …
    Would you have a sugestion about that ? Should I mail the support (as soon as it re-opens … ;) to ask them ? Or is it a no-solution situation ?
    Thanks for your input.

  26. Posted January 5, 2008 at 4:12 pm | Permalink

    @ Catherine:

    The issue you have is with Netvibes not WordPress or WordPress.com or even Gravatar. Change your avatar image if you don’t like it. I can’t help you with Netvibes. For help with how it works in WordPress and WordPress.com, see the appropriate forums or the Gravatars site.

  27. Posted January 6, 2008 at 3:06 am | Permalink

    Hello Lorelle,
    thanks for the answer. Yet, my question was really about supressing the avatar in WordPress.com. I do not want to change it, I want it to disappear and things to go back as they worked before. I think I shall contact the support to ask them about that …
    Thanks again.

  28. Posted January 8, 2008 at 5:07 pm | Permalink

    Well written entry. Thanks!

  29. Posted January 15, 2008 at 1:13 pm | Permalink

    is there a plugin to display avatrs for different posters in a blog?

  30. Posted January 15, 2008 at 2:32 pm | Permalink

    @ odiaseo:

    I’ve listed specific Gravatar Plugins in the article. Is there something more that you need to do with these? I’m not sure I understand what you are asking for.

  31. Posted January 27, 2008 at 3:09 pm | Permalink

    I NEED HELP when i upload a pic and press send to editor, i want to move it around to the bottom, but when i click on it and move it, it wont go to the right place, I’ve looked in the FAQ but I can’t find a thing PLEASE HELP1

  32. Posted January 27, 2008 at 4:17 pm | Permalink

    @ smartie495:

    Delete the image from the Rich Text Editor. Move your cursor to the place where you want the image to go. Using the image uploader, add the image at that point. Then click on the image to align it within your post text. You can learn more about this in WordPress.com Blog Bling: Decorating Your WordPress.com Blog.

  33. Posted January 29, 2008 at 12:30 pm | Permalink

    Gracias por el dato!!! ya lo integre en mi blog.
    Thanks for a tips!!

  34. Posted February 14, 2008 at 1:06 am | Permalink

    Simple iconic logos look great as Gravatars…

  35. Posted February 17, 2008 at 9:25 pm | Permalink

    ok. Lets see if this works

  36. t1ckle
    Posted March 15, 2008 at 8:32 pm | Permalink

    umm, i’ve tried uploading an image i saved to my computer..But it’s not showing up on my dashboard or next to my name

    what am i doing wrong?

  37. Posted March 16, 2008 at 9:22 am | Permalink

    @ t1ckle:

    It can take some time, maybe a few hours, for the server to update itself so your Gravatar is visible across the web. If you continue to have problems, visit the WordPress.com Support Forum for help, if you are using WordPress.com. Visit the WordPress Support Forum if you are using the full version of WordPress.

  38. Posted April 17, 2008 at 9:59 pm | Permalink

    Now for the real question: How does one add an avatar to one’s forum profile on wordpress.org?

  39. Posted April 17, 2008 at 10:14 pm | Permalink

    @ Edward:

    Actually, that’s a very good question. I’m not sure I have the answer. I used to have an avatar on the WordPress Support Forum and it was indeed there when I checked my profile. I tried to edit my profile to see if I could set the avatar there, and suddenly, my avatar was gone. So I went to Gravatar.com from that page and I was already signed in with no avatar shown. Since I didn’t have an avatar associated with the email address of the support forums, I assumed that I was automatically still logged in through WordPress.org. So I’ve added a new avatar associated with that email address and we’ll wait and see if it appears on the WordPress.org forums.

    Not the answer you wanted, but a good one. Stay tuned for an answer.

  40. Posted May 15, 2008 at 9:55 am | Permalink

    Thanks for the info, works like a charm!

10 Trackbacks/Pingbacks

  1. [...] Lorelle, nos muestra en sencillos pasos, como integrar avatar y gravatar en nuestro blog, ya sea para WordPress Hosteado o WordPress.com. En lo personal se me hacen muy agradables. [...]

  2. [...] Lorelle van Fossen did the blogosphere a great service in promoting Gravatars. These are avatars that show up whenever you leave your email in a comment. I have these installed on my blog so why not go get your free gravatar and start seeing it show up wherever your safari takes you? [...]

  3. [...] accordingly, but a blog is not a place you can store your notes to come back to and remember how to add a Gravatar to your blog. There are bookmarking services for [...]

  4. [...] A nice article by Lorelle, with lots of links and examples of good and poor contrast in small images - Lorelle on Adding Avatars and Gravatars [...]

  5. [...] accordingly, but a blog is not a place you can store your notes to come back to and remember how to add a Gravatar to your blog. There are bookmarking services for [...]

  6. [...] 2.5+: How To Add Gravatar to Your WordPress Theme and Adding Avatars and Gravatars to Your WordPress and WordPress.com Blog will help you learn more about the new Gravatar system now included in WordPress [...]

  7. [...] you just read this whole article and have no clue what a Gravatar is, I suggest you read this one first by Lorelle on WordPress. It goes over the basics of how to get your own Gravatar by signing up at [...]

  8. [...] your gravitar look good on this site, make sure it looks good at 65 pixels. My friend Lorelle has a fantastic post on what makes a good gravitar that you might want to read when trying to figure out what image to [...]

  9. [...] Adding Avatars and Gravatars to Your WordPress and WordPress.com Blog, I discuss how to create an avatar for Gravatar and add it to your WordPress blog, including [...]

  10. [...] already present in your theme. If you’d like to make your own Gravatar, I suggest you read this article and scroll to the “How Do I Make My Avatar/Gravatar?” section. Subscribe to RSS By: [...]

Post a Comment

Your email is never published nor shared.