Skip navigation

WordPress School: Blavatars

Badge - Learn WordPress with Lorelle VanFossen at WordPress School.About a month ago in Lorelle’s WordPress School free online course you added a Gravatar image to your WordPress.com test site. A Gravatar image and profile is linked to your email address and displays on any WordPress (and many other services) site in the world when you use that email address to comment.

Another visual part of your online persona and profile is the blavatar.

A blavatar is your site’s blog avatar.

Here is the difference between a Gravatar and Blavatar:

  • Gravatar: Linked to your image, displayed anywhere Gravatars are used including all WordPress and WordPress.com sites, in comments, author profiles and icons, and throughout any site where you are a registered member. Your Gravatar follows you from site to site, wherever you use your email address.
  • Blavatar: Linked to your site, displayed within site networks like WordPress.com to represent the website. You may be the owner or a contributor to the site, and your Gravatar will appear there and your Gravatar profile highlights these sites if you wish, displaying their Blavatar. The Blavatar is also the site’s favicon, the image that appears on the web browser tab.

Just like a Gravatar image, a Blavatar must be square and withstand a wide range of image sizes from 16 to 148 pixels wide, maybe even larger.

Blavatar Examples of Fav Icons - Lorelle WordPress School.

A Blavatar image may be the same as your Gravatar image. It may be different. That’s a part of your online identity and site branding decisions.

On a multiple contributor site, the site’s branding is separated from the authors. Blog avatar and picture images are different, focusing on promoting the site’s identity.

Blavatar Examples in WordPress com Reader - Lorelle WordPress School.

How to Add a Blavatar to Your WordPress Site

Have the image ready, a minimum of 128 pixels square, though larger is acceptable.

  1. Go to Settings > General
  2. In the upper right corner is the Blog Picture/Icon, not the word “blavatar”
  3. Click Browse to locate the image on your computer
  4. Click Upload Image to upload the image
  5. In the next screen you will be given the opportunity to crop the image if necessary
  6. The next screen reports “All done!” so click the Back to blog options to return back to the Settings Screen
  7. Within a short time, the Blavatar should appear in your favicon in the web browser, throughout your site and WordPress.com

Once an image is uploaded, you have the option to upload a replacement image or remove the image.

More Information on Blavatars

Basically, like Gravatars, Blavatars are fairly simple, but take them one step further. Consider how the WordPress Theme or Plugins take advantage of these branding and identity graphics and incorporate them. Much to learn about these later in the class.

Until then, here are some articles to whet your appetite.

Assignment

Lorelle's WordPress School Assignment Badge.Your assignment is to create a new one using a graphic editing program or online app to represent your site’s identity.

While you could use your existing Gravatar image, we are here to learn how WordPress uses both the Gravatar and Blavatar images. By making them different you can spot which one is which.

Remember the image should be a minimum of 128 pixels square.

Upload the image to your test site per the instructions above.

Clear your browser’s cache and give it a few minutes to update across WordPress and web browsers and see how many places you can find where your blavatar appears. It may take seconds to 30 minutes or so to be visible.

In the Google+ Community for this online course we will be discussing blavatar image designs, whether or not it should be the same as the Gravatar image, and how it is used to market a site.

This is a tutorial from Lorelle’s WordPress School. For more information, and to join this free, year-long, online WordPress School, see:

Subscribe to Lorelle on WordPress. Feed on Lorelle on WordPress Follow on Twitter. Give and Donate to Lorelle VanFossen of Lorelle on WordPress.


5 Trackbacks/Pingbacks

  1. […] WordPress School: Blavatars […]

  2. […] page to represent you and your site’s purpose, and other images to represent your site called Blavatars. In the second post, a tutorial, in your test site’s article series you were to add a minimum […]

  3. […] to the size of the favicon, the graphic representing the website. On WordPress.com, this is the Blavatar. In Firefox, the non-pinned tabs scroll horizontally left and right under them, so to speak, […]

  4. […] WordPress School: Blavatars […]

  5. […] WordPress School: Blavatars – Lorelle on WordPress […]

Post a Comment

%d bloggers like this: