WordPress School: Blavatars ![rw-book-cover](https://lorelle.files.wordpress.com/2015/03/blavatar-settings-with-image-lorelle-wordpress-school.jpg) ## Metadata - Author: [[Lorelle on WordPress]] - Full Title: WordPress School: Blavatars - Category: #articles - Summary: About a month ago in Lorelle’s WordPress School free online course you added a Gravatar image to your WordPress.com test site. - URL: https://lorelle.wordpress.com/2015/03/17/wordpress-school-blavatars/ [![Badge - Learn WordPress with Lorelle VanFossen at WordPress School.](https://lorelle.files.wordpress.com/2015/01/wordpress-school-with-lorelle-learn-wordpress-badge.gif?w=230&h=230)](https://lorelle.wordpress.com/category/wordpress/wordpress-school/) About a month ago in [Lorelle’s WordPress School free online course](https://lorelle.wordpress.com/classes-and-workshops/wordpress-school/) you [added a Gravatar image](https://lorelle.wordpress.com/2015/02/10/wordpress-school-gravatar/) 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](https://lorelle.wordpress.com/2015/02/09/wordpress-school-your-profile/) is the *blavatar*. Play Video Introducing Blavatar - Avatars for your blog Share Button Play Mute Current Time 0:00 / Duration -:- Stream Type LIVE Chapters Settings Settings Menu * Speed1x + 2x + 1.75x + 1.5x + 1.25x + 1x, selected + 0.75x + 0.5x + 0.25x * Quality480p + 720p + 480p + 224p * CaptionsOff + Off, selected Picture-in-PictureFullscreen Loaded: 0.00% 0:00 This is a modal window. The media could not be loaded, either because the server or network failed or because the format is not supported. Beginning of dialog window. Escape will cancel and close the window. TextColorWhiteTransparencyOpaqueBackgroundColorBlackTransparencyOpaqueWindowColorBlackTransparencyTransparent Font Size100%Text Edge StyleNoneFont FamilyProportional Sans-Serif Reset restore all settings to the default valuesDone Close Modal Dialog End of dialog window. Close Modal Dialog This is a modal window. This modal can be closed by pressing the Escape key or activating the close button. 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.](https://lorelle.files.wordpress.com/2015/03/blavatar-examples-of-fav-icons-lorelle-wordpress-school1.png) 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.](https://lorelle.files.wordpress.com/2015/03/blavatar-examples-in-wordpress-com-reader-lorelle-wordpress-school.jpg) ###### 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. [![Screenshot of Blavatar Settings with image.](https://lorelle.files.wordpress.com/2015/03/blavatar-settings-with-image-lorelle-wordpress-school.jpg?w=162&h=162&crop=1)](https://lorelle.wordpress.com/2015/03/17/wordpress-school-blavatars/blavatar-settings-with-image-lorelle-wordpress-school/)[Blavatar Settings with image - Lorelle WordPress School](https://lorelle.wordpress.com/2015/03/17/wordpress-school-blavatars/blavatar-settings-with-image-lorelle-wordpress-school/) [![Screenshot of Blavatar - Crop Image - Lorelle WordPress School.](https://lorelle.files.wordpress.com/2015/03/blavatar-crop-image-lorelle-wordpress-school.jpg?w=162&h=162&crop=1)](https://lorelle.wordpress.com/2015/03/17/wordpress-school-blavatars/blavatar-crop-image-lorelle-wordpress-school/)[Blavatar - Crop Image - Lorelle WordPress School](https://lorelle.wordpress.com/2015/03/17/wordpress-school-blavatars/blavatar-crop-image-lorelle-wordpress-school/) [![Screenshot of Blavatar Settings - All done.](https://lorelle.files.wordpress.com/2015/03/blavatar-settings-all-done-lorelle-wordpress-school.png?w=162&h=162&crop=1)](https://lorelle.wordpress.com/2015/03/17/wordpress-school-blavatars/blavatar-settings-all-done-lorelle-wordpress-school/)[Blavatar Settings - All done - Lorelle WordPress School](https://lorelle.wordpress.com/2015/03/17/wordpress-school-blavatars/blavatar-settings-all-done-lorelle-wordpress-school/) ###### 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 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](https://plus.google.com/u/0/communities/115251582756616355670) 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](https://lorelle.wordpress.com/classes-and-workshops/wordpress-school/). For more information, and to join this free, year-long, online WordPress School, see:*, WordPress School: Blavatars, Lorelle on WordPress, 01gnmcza2j8z27k1mswwdc12am.