Create your own vanity gravatar... then hash it

Mary Dean

As you wander the web, you might notice that many people have a cute little photo associated with their name. For example, when I login to GitHub, Codepen, DigitalOcean, or many other sites, a mini-me magically appears.

How a gravatar appears on Codepen
A gravatar on Codepen

If I write a comment, there I am again.

How a gravatar appears on Github comments
Same gravatar... on Github!

Where does mini-me come from? How could multiple companies all possess the same image of me? Are they secretly owned by one giant mega-corporation that tracks me everywhere I go?

Luckily, no. A gravatar is a "globally recognized avatar" and you create it yourself. You register it at, associate it with an email address, and voila. If you don't have one yet, let's make one, and learn some stuff along the way.

Make your own gravatar

Find a nice picture of yourself. How nice? As nice as 2048-pixels square, that's how. They recently increased the allowable image size so people can inspect your nose hairs on their IPhones, but since your gravatar will usually be seen as an 80-pixel square, you don't need anything that huge.

Striking the right attitude is what counts. We don't want to see a blurry face cut out of your Thanksgiving dinner snapshot. Put some thought into it, Mon!

Here are some random examples of gravatars.

Examples of gravatars
Other peoples' gravatars

Personally, I like to see real people rather than cartoons or animals. My first programming class was an online program that lasted several months. I spent a lot of time interacting with the instructor -- hearing his voice during the live sessions, getting his feedback on my homework, "chatting" in the forums -- and it always felt weird and alienating that I never once saw what he looked like. I didn't want to stalk him, mind you, just to see if his face matched his voice... just see what he looked like, in a normal, human way for goodness sake.

(It was called Tealeaf Academy, now called LaunchSchool. Excellent program if you're interested in learning Ruby. I notice they still have no names or photos of the instructors. Maybe they're hideously deformed creatures, or FBI most wanteds. See what happens when you don't include a real photo in your gravatar? People think things.)

For my own gravatar, I chose to put a picture of me on the back of a pony when I was three. Why? Because I don't have any good pictures of my adult self, but more importantly, so that when people read my posts and comments, they will think, "Wow, what a smart 3-year old!" and hopefully won't say anything mean.

As you have probably surmised, your photo must be SQUARE. So crop it into a square shape. If I showed you how to do that, I would have to start ranting about how Windows Paint has been stripped of basic features like "constrain a selection to a square shape" that it had 20 years ago, so I won't. You'll just have to open Paint, use the selection tool, eyeball the little pixel counters at the bottom of the screen, and try to stop your jittery fingers precisely when the width is the same as the height.

Image must be square
Abe succeeds at making a square

Got it! Now click "Crop," and save your image. Then go to this website and create a gravatar account:

"But wait!" you say. "It says I have to login into my Wordpress account! I neither have nor want a Wordpress account."

I know, neither did I. It seems that Gravatar is a subsidiary of Wordpress. Don't worry, though, they won't force you to create a virus-laden, ad-ridden blog. They will just ask you to enter your email address and to upload an image, and then you'll never have to go back unless you want to change one of those two things.

As I was writing this, I was happy to discover that you can add multiple email addresses and images to your Gravatar account. So I decided to create a separate gravatar for my (er, future) business name, Casa 14 Studios. I entered my business email address and uploaded my tortuously-produced logo (it's a casa with a 14 in it, in case you can't tell). At first I thought it looked fine:

tiny gravatar
How my logo appears on Codepen...nice!

But then I ventured over to a couple of other websites where I use my business email, and, oh no! Ugly gravatar alert!

ugly gravatar
How my logo appears elsewhere... ick!

Yuk. It seems that some websites roundify your gravatar. And where is that orange dot coming from? And why is the other one all squished to the top? I don't know. But now I do know the second rule of gravatars:

Not only must your gravatar be SQUARE, it must also look good as a CIRCLE.

Back to the logo drawing board.

How do gravatars work?

You might be wondering, how does some random website "fetch" my gravatar? I was wondering that, too, so I took a look at their Developer Resources. Here's how they do it.

You go to a website and create an account, using your email address. They take that email address and "hash" it -- which means "turn it into secret code" -- using an algorithm called "MD5," which, since my name is Mary Dean, I assume was named after me.

To see how easy it is to turn your email address into an MD5 hash, hop over to this website, type your email address into the box, and press the button. While you are there, copy that hash into your clipboard.

It will look something like this:


With that long string of text, you, or anyone, can fetch your gravatar. Just type the following into a web browser, replacing my hash with your hash.

Press enter, and instantly you should see your 80-pixel face... or your dog's face, or whatever image you used for your gravatar.

An http call
Making an HTTP call to fetch a gravatar

OK, so at first I was thinking, "I shouldn't show my actual email "hash" to my readers. That's private!" But then I realized... anyone who sees anyone's gravatar on any page can simply look at the page source (right-click, View Page Source) and see that person's hashed email address.

Indeed, this is what I am seeing under the hood:

User Avatar of Mary Dean

If you click on that URL you will see a larger mini-me. Why is it larger? Note the   ?s=512   at the end of the URL. That means "give it to me in a size of 512 pixels."

A larger gravatar

What we just did is called "making an HTTP request to the API" or simply "making a call to the gravatar API."

API ("application programming interface") is one of those scary terms that you can be totally intimidated by until you realize it just means, "the format in which you must send your request in order to get something back." It's like those complicated rebate forms we used to have to fill out to get $20 back from the purchase of a laser printer. "Complete and sign the enclosed form. Send it along with with the UPC symbol cut from the bottom of the box, and the original register receipt with the printer purchase highlight

Cool, huh?

Here is a Codepen that will accept your email address, hash it, and return your gravatar, just like we did. You can use it right here on my page. You could also examine the javascript to see how he generates the hash.

See the Pen Gravatar Checker (MD5.js Test) by Sam Dennon (@SamEureka) on CodePen.

Is it "safe" to have a gravatar?

The thing that surprised me on this little excursion to hash-land is that I always thought "security" meant that secret codes were produced on the fly. If anyone ends up with the same hash from the same email address, it can't be that hard to reverse engineer. That's called a handshake.

Your email address is a unique identifier, meaning nobody else on the internet has that same email address. The "hashed" version of your email address is likewise unique. Try googling your hash. When I google mine, it turns up a comment I made on a Code Academy website back in 2014.

Any website that uses gravatars already stores your email address in the hashed format. So, not using a gravatar doesn't protect your hash from being associated with you in the event a website is hacked, or, just as likely, sloppily designed. It would be possible for someone to consolidate all the brilliant things I have said on Stack Overflow, Code Academy, Codepen, Github, Wordpress, and wherever, by tracking my hash, so to speak.

But (a.) so what? Most of my participation in these sites has been related to trying to learn how to solve various programming issues. Not highly sensitive stuff.

And (b.) you could easily prevent that kind of tracking by using a different email address and different gravatar at each different site that you participate in. But the whole point of having a "globally recognized avatar" is to unify, rather than fracture, your existence, isn't it?

So here's the recommendation:

  1. At a bare minimum, you should have two different email addresses for your personal and public stuff. Your gravatar is your public face. Don't use your personal email address for it.

  2. It's also a good idea to have a third email address for any use that is likely to put you on a mailing list. That way, your discount coupon from Kohls and your daily news briefing from the New York Times don't get mixed in with your sister's happy birthday message, or news about your cousin's chemotherapy.

  3. If you register on a "highly sensitive" website, where you would be really horrified to have anything you say tracked back to you, you should use an email address that you ONLY use for that site.

And here's a good trick for that. When you have a gmail account, you actually have an infinite number of email addresses. Why? Because you can add a period to the first part of your email address: =

And/or you can add a plus sign and anything else to the end of your email address:

All of those "different" emails will (a.) produce different hashes (b.) still be delivered to your gmail account. So you could set up filters, causing all of your +todo items go into a folder and everything from +junkmail to go into the trash. Here's an article about doing that sort of thing:

I think that's a very good idea whenever you sign up for something "iffy." Add a tag to the end of your email address when you sign up for something, like:

Later, when you are flooded with spam, you will know exactly where it came from and you can use that unique address to filter it right into the trash.

(None of that addresses the issue that Google scans all free email accounts to mine marketing information, so there goes your privacy anyway. It's still a good idea for junk mailing lists, but I'm a big believer in paying for your personal/private email accounts.

If you want to read an in-depth discussion of gravatars and privacy, see here.

And if you want to look into using and filtering multiple gmail addresses for different purposes, see here.

Meanwhile, I hope you enjoy seeing your gravatar pop up in unexpected places, and I urge you to participate, not just lurk, in the various communities that are out there to help you learn and create.