Favatars (and Favatar Wordpress Plugin)

December 26th, 2004 ,

Favatars

The latest Favatar plugin for Wordpress can always be found at WP-plugins.org. More info on favicon.ico files is explained elsewhere.

With the help of Gravatar - globally recognized avatar - there’s been a rise in the use of avatars on weblogs. An avatar is a small image representing a commenter.

But no later than the Gravatar service’s skyrocket to success did the wings break. Gravatar’s host had shut them down temporarily. Since Gravatars are server-based, one could guess it was only a matter of time.

There is an alternative, dubbed “Favatars”. The idea, which has been around for a while, is to use small icons files named (favicon.ico files) as avatars. Their initial purpose was to provide a small bookmarks icons and URL addresses.

I am, of course, writing about this because I have now implemented “favatars” on this very website. Leave a comment — try it out. No more testing. Trust me, it works if you type in the correct URL :)

1. Technical Background

The initial implementation of Favatars here on Noscope was based on work by Alex Jones that in turn relied on code by Paul James. The basic idea was to analyze the URL of commenters using regular expressions, looking for the presence of a favicon.ico.

In their latest Wordpress plugin, version, the presence of a favicon.ico file is automatically stored in the same SQL database Wordpress uses.

2. Favatars vs. Gravatars

Whether to choose Gravatars or favatars is a matter of individual taste. Both systems work well, but each system has their pros and cons.

Personally, I have never been a of avatars. While they can potentially make an online debate a bit more personal, this is rarely the case because people will often choose Bart Simpson or Britney Spears. That’s hardly personal. Furthermore, had I chosen Gravatars, I would’ve chosen a very small size, partly because of the above mentioned reason, partly as to not interfere or overshadow the comments themselves. Finally, favatars are peer-based, while Gravatars rely on Gravatar.com running.

Considering this, the 16×16 pixel alternative is perfect for Noscope.

Gravatar pros

  • Rating system
    Gravatar rate submitted avatars. You can choose to show any rating, or only “work-safe” avatars. This is impossible for favatars.
  • Fewer size limitations
    Gravatars can be as much as 80×80 pixels, whereas favatars are very rarely larger than 16×16px. As Matt points out, favatars can be up to 128×128 px in size.

Gravatar cons

  • Serverbased
    If Gravatar.com succumbs to server pressure, all weblog gravatars will be unable to load.

Favatar pros

  • Peer-based
    Each favatar is loaded from each individual commenters server. That means if that commentators server is down, his/her favatar alone will not load. It won’t influence other favatars. It also means if a commentator wants to change his/her favatar, he/she can update their favicon.ico files at their own leisure.

Favatar cons

  • Size limitations
    While favatars can be 16×16, 24×24, 32×32, 48×48, 64×64, 128×128 pixels in size, it is the exception to see favatars that are larger than 16×16px. Additionally, since favatars are bitmap files (whereas gravatars are JPEGs), filesizes are slighly, although not noticably larger.
  • IE problems
    Internet Explorer has problems rendering badly formed favicon.ico files, which do appear from time to time. Other browsers have no problems. Worst case is that IE shows black squares in place of the favatars.
  • No rating
    It’s impossible to rate the contents of favatars. As such, graphic material could potentially appear. Due to the nature of favatars though, this is unlikely to happen.

3. Favatars for Wordpress Plugin

Jeff Minard improved my initial experimental plugin. Go grab the latest version now!

Installation

Download the plugin and drop it into your plugins directory (wp-content/plugins). Activate the plugin on your WordPress Plugin Admin page.

To show comment author Favatars in your comments, place the following code where you want it to show up:

<?php comment_favicon(); ?>

If you want to set the maximum size of the favatar icons, you can add parameters to the function:

<?php comment_favicon($before='<img src="', $after='" alt="Avatar" width="16" height="16" />'); ?>

Another method, suggested by John Serris, is to have the favatars load as CSS backgrounds. To do this, instead show the Favatar this way:

<?php comment_favicon($before='<span style="background: url(', $after='); width: 16px; height: 16px; " /></span>'); ?>


The primary benefit of this is that it allows JavaScript window.onload events to run before all favatars have finished loading.

Known bugs/conflicts

  • Ben points out that Favatars Revised might conflict with Subscribe To Comments 1.4.2. Upgrade to 1.4.4 and it should work fine.

4. Discussion

Technicalities aside, feel free to discuss or test favatars.

Oh, and did you know that the word avatar comes from Hindu mythology, and means “the descent of a deity to to earth in bodily form”?

  1. Eudemonia - Meine neuen Favoriten pingbacked Posted August 28th, 2005, 01:53
  2. Alex Jones trackbacked Posted October 23rd, 2005, 20:54
  3. Buenos Aires de Dise?o trackbacked Posted November 28th, 2005, 04:26
  4. N U M B - New Urban Music Blog trackbacked Posted December 20th, 2005, 23:01

Comment pages: « 1 [2]

  1. testing for 32×32

    kelvin said June 29th, 2005, 02:01:

  2. Kelvin,

    The favicon is treated as an image, and I manually set the width and height to 16×16 px. That means anything larger is just scaled down. But you could choose to not specify the size, and simply have up to 48×48 icons.

    Joen said June 29th, 2005, 11:42:

  3. Sounds great, I’ll give it a try.

    Tony said July 09th, 2005, 11:39:

  4. Can you stand one more favicon test? Thanks for your work!

    ryan said July 14th, 2005, 20:10:

  5. You’re all welcome to test. And thank Jeff Minard, not me.

    Joen said July 14th, 2005, 20:56:

  6. I like the idea (mostly the part about when gravatar.com is dead not all images will be lost) and will try to show some favicons someday, but Id rather not store the files in my database, Id prefer to show whatever the present icon of the webpage is.

    Ma~

    Mathilde said July 24th, 2005, 17:21:

  7. Mathilde,

    but Id rather not store the files in my database, Id prefer to show whatever the present icon of the webpage is.

    I agree, and fortunately that’s exactly how it works now. What’s stored in the database is not the favicon image, only information whether or not a commentator has a favicon or not. So if you change your favicon, it’ll also be changed here, I’m only linking to your favicon :)

    Joen said July 24th, 2005, 17:31:

  8. Hello there,

    Jeff Minard’s page kind of isn’t working, so I thought I’d ask here:

    In my WP istallation of Favatars I see a blank options page. It seems this has happened to other WP 1.5 users in Germany, too.

    Any ideas?

    Christoph said July 25th, 2005, 15:52:

  9. Christoph,

    I’m afraid I can’t help you with that problem. Try didding through Jeff Minards new website - you may find what you’re looking for there.

    As for the contents of the options page, it’s only supposed to hold two things. 1: “Flush Favatars” (removed favatar table in db) and “Favatise” (goes through all previous comments looking for favatars).

    Joen said July 25th, 2005, 17:28:

  10. Hi, I built a plugin called Comvatars, sitting on top of the Gravatars and Favatars plugins, to combine both features. You may want to take a look at it. The location is http://soeren-weber.net/post/2005/08/07/44/

    Shelby said August 09th, 2005, 09:27:

  11. Just wanted to let you know that I absolutely LOVE the concept. Ideally, though, there’d be more than just one favicon: Not every website icon is suitable as an avatar and vice versa. Nevertheless: Your technique is intelligent, re-uses existing resources and eliminates the necessity of a man-in-the-middle. Just what the web needs, really.

    Thanks for your efforts and keep up the good work!

    DemonDeLuxe said August 28th, 2005, 03:22:

  12. Does this work for head link specified favicons?

    Like:
    link rel=”shortcut icon” type=”image/x-icon” href=”/favicon.ico” />

    or

    link rel=”icon” type=”image/x-icon” href=”/favicon.ico” />

    Or only for root directory favicon.ico files? I know many shared hosting/blogging environments support the links, but cant give access to the roor favicon.ico file.

    Rob A said October 28th, 2005, 13:55:

  13. Hi Rob,

    I’m not completely sure, but my bet is it only works for root icon files. On the other hand it’s also my bet that it would be pretty easy to add the search for the head link specification first…

    Joen said October 28th, 2005, 22:22:

  14. Hey, this is programming not some kind of arcance thing. First bet lost. Second not necessary…

    It first does check for a link tag inside of the page. If this wasn’t found the plugin assumes that the favicon is named favicon.ico and placed in your webservers root path.

    Before finally take this icon, the plugin checks whether an icon can be found in the aquired location.

    There’s a limitation. The plugin only works with direct links. If you or your ISP is redirecting the given Website address, no Favicon will be found. I am not sure why the programmers did code it that way and not follow the redirects. They also could have used the WP Snoopy class that does not have this kind of limitiation. Maybe they’ll use it in the next version of the plugin…

    McShelby said October 28th, 2005, 22:44:

  15. ditto

    Mathieu 'P01' HENRI said November 01st, 2005, 18:54:

  16. Really neat animated favicon, Mathieu… I didn’t know you could use animated GIFs for favicons. Of course it doesn’t work in IE, but it’ll work in Firefox, even for the bookmark.

    Joen said November 07th, 2005, 11:58:

  17. Joen: thanks. That’s why I’ve tweaked a bit my .htaccess and made PHP script to provide the animated GIF to Gecko based browers, and the plain favicon to the others. ;)

    Mathieu 'P01' HENRI said November 12th, 2005, 16:39:

  18. Mathieu,

    That?s why I?ve tweaked a bit my .htaccess and made PHP script to provide the animated GIF to Gecko based browers, and the plain favicon to the others. ;)

    I’d love if you could share your .htaccess secrets in a tutorial and pingback this article! Hint hint :)

    Joen said November 12th, 2005, 18:40:

  19. Hi Joen,

    I don’t know if it would be of interest to you, but I’ve added favatars to my site (I much prefer them to gravatars, especially after reading your articles). I’ve added a live favatar preview to the comment previewing on my site as well, that you are very welcome to make use of if you like.

    Dave Child said January 04th, 2006, 14:27:

  20. Dave,

    That’s damn nice! I AM interested…

    However, I’m so busy atm that I won’t be able to pick it up. Ideally someone else will pick it up and turn it into a plugin — here’s hoping.

    For now: wow! Good job!

    Joen said January 04th, 2006, 14:34:

  21. This plugin is the closest I have come to what I am looking for - but its still not what Im after? Though I did recommend it to a friend and she is loving it.

    I would love to have a “local” version of this where a person gets to choose say from a “folder of images” (gif, jpeg, ico) and thats their default image when they visit…  …nothing from anyone elses server, all local - small images “attahced” to their WP profile and show up when they comment.

    The Gravitars and Avitars - but on ur home machine…  …know of a plugin that can do that?

    Thanks!

    –Richard

    Richard W said January 13th, 2006, 14:09:

  22. I guess Skippys Gravatars can also handle local avatars as so can mine Comvatars plugin:

    http://soeren-weber.net/post/2005/08/07/44/

    McShelby said January 13th, 2006, 14:24:

  23. I’m having a hard time… half the time the favatars won’t automatically load and I have to run Favatise. It works sometimes, which confuses me. Other times, a commenter who’s previously had their favicon load successfully will end up with nothing. Any thoughts? I don’t really have any other comment-related plugins, so I’m not sure if there’s conflicts… (using WP 2.0)

    Blythe said January 28th, 2006, 06:30:

  24. How do you post your favicon?

    Pete Nawara said February 13th, 2006, 19:54:

  25. Pete Nawara said:

    How do you post your favicon?

    Posting your favicon happens automatically on a Wordpress weblog with the Favatar plugin installed.

    Of course you have to store the favicon on your own server, in your case, at http://www.petenawara.com/favicon.ico. When you type in your URL here, the Favatar plugin will automatically post the favicon for you.

    My favicon is located at http://www.noscope.com/favicon.ico

    Joen said February 13th, 2006, 20:02:

  26. I prefer using Favatar ‘caz I can manage my resource. And I’m now tring to implement to my weblog, but I’m stuck. I think I placed my favicon at right directry(which is http://blog.camedo.com/favicon.ico), but it doesn’t favatize OK. still working what’s going on with the plug-in. Or maybe…I must be wrong.

    BTW WP-plugins.org is scrumbled right now? I can’t enter the site.

    touchan said March 12th, 2006, 09:18:

  27. Thats cool…
    but what if you dont have website?

    GooL$ said March 12th, 2006, 17:26:

  28. GooL$ said:

    Thats cool…
    but what if you dont have website?

    That’s the downside. Then you don’t have a favatar :(

    Joen said March 12th, 2006, 18:04:

  29. Check this site: http://www.myfavatar.com/

    MyFavatar said March 16th, 2006, 01:49:

  30. In regards to Mobius’ problem, if he was downloading from http://dev.wp-plugins.org/wiki/favatars he might have downloaded the actual HTML page instead of the PHP file. I found that you have to click on the download link http://dev.wp-plugins.org/file/favatars/trunk/favatars.php which opens up a page where you can can cut and paste.

    Stupid me spent 30 minutes figuring that one out :) Works great though noscope, thank you.

    Michael said March 30th, 2006, 12:16: