Favatars (and Favatar WordPress Plugin)

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 16x16px. 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 16x16px. 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!

WordPress Plugin: Favatars

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:

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

<?php comment_favicon($before='Avatar'); ?>

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=''); ?>

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”?

69 thoughts on “Favatars (and Favatar WordPress Plugin)”

  1. Rob Mientjes says:

    Joen, the real problem indeed seems to be the constant server requests to many different servers, every single time. It won’t make the page faster and if you don’t cache it, there’s trouble to be found.

    (For the record, I have a 32×32 icon in it as well :P)

  2. I like both methods; I’ll have to figure out which way I want to lean…

  3. matthew says:

    Yup, nice to have an alternative

  4. Joen says:

    indeed seems to be the constant server requests to many different servers, every single time. It won?t make the page faster and if you don?t cache it, there?s trouble to be found

    Indeed. After only these few days of testing the system, I’m already sold with regards to the visual look. But these server requests keeps me from simply embracing it and letting it go. I wonder, would it be hard to program such a caching system?

    By the way, Matt’s Staticize Reloaded does seem to help!

  5. Matt says:

    Icon files can have several different sizes embedded, up to 128×128. Ideally you would check for a favicon when an comment is left instead of page load.

  6. Joen says:

    Icon files can have several different sizes embedded, up to 128?128.

    Interesting, I did not know that. I’ll add it.

    Ideally you would check for a favicon when an comment is left instead of page load.

    That’s not a bad idea! Should the presence of a favicon then be stored in the database, cached or so?

    It would be nice if it was cached in the same way that Staticize caches pages (and at the same times), that is—updating only when a post is edited, created or commented.

  7. Matt says:

    I wouldn’t even worry about caching, just link to the original. HTTP and your browser have numerous advanced caching systems in place already, just take advantage of that.

  8. Joen says:

    I wouldn?t even worry about caching, just link to the original. HTTP and your browser have numerous advanced caching systems in place already, just take advantage of that.

    While that is true, it still boggles me that for every favicon that’s loading, there is a, well, 1 second delay before it being loaded. It feels clunky, and is no doubt due to the code I’m using.

    That is, it only feels clunky when I’m not using Staticize—it does seem to do a big difference. Now that you’re here, can this be true? Can you clarify what, if any, difference Staticize makes in this?

    As for the clunkyness, it should be noted that Alex Jones does mention in his own comments that his implementation might need work, although I suspect the problem lies elsewhere.

  9. Jeff says:

    I’m definately for the Gravatar side. I love the rating system, and being able to use it so easily is wonderful. All I have to do is md5 the email (is md5 a verb?). I have the image, and no scripting was needed. Also, the problem seems very possible to get working with gravatars… all they need is a huge caching system and tons of distributed mirrors :).

    Caching would also be nice, but sometimes I like to change my favatar, and would like to see it immediately update as my gravatar does.

  10. Jeff Minard says:

    I think Matt’s point has been missed: Why cache the favicon on your server at all?

    When the comment is posted, have the script run an extra check to determine if a favicon exists, try to locate it, and if it’s positivie, then add that extra field to the comment.

    Don’t download and store the favicon on you server at all. This takes away a little bit of control that you’d have (ie, checking them out and making sure they load fast) but it will keep you from having to reload it every time and cache it. Also it would allow the favicons to stay updated if a user changes theirs.

    This system could be as simple as during the comment loop, echoing an image tag with the source being equal to “< ?php echo $url ? >favicon.ico” (well, not that simple, but you get the idea.)

  11. Dave Child says:

    Me too, I wanna see mine! 🙂

    I like the idea of avatars, generally, but after a lot of thought decided not to add them to my site. On the one hand, there’s a possibility that they might increase the chance a user comments and make comments easier to read through. On the other, they might just get in the way. Favatars seem like an excellent way to achieve the avatar thing.

    Are you going to use XML HTTP Request or something similar to add them to the preview too?

  12. John Serris says:

    I wanted to try out favatars too but don’t think its possible to do them the way I do gravatars right now. You see, all the javascript on my site runs onload. This means that all images (IMG tags) must load before the script will run. This becomes totally unacceptable after a few comments. I worked around this issue by using an inline background style on a div to load the gravatar image as a css background. The problem with .ico files is that they don’t seem to work as css backgrounds…

    I really wanted to switch over to favatars. Can anyone see another way around this?

  13. Hanni says:

    Nice Work Joen!

  14. Jonas Rabbe says:

    Whoever came up with it first deserves some kudos. Using the favicon as an avatar for posters is quite clever. Just to repeat what has already been said.

  15. This is all very interesting. I am not sure what I like best, I am currently using gravatars and will keep using them until I see a very good reason to leave.

    That being said, this idea has serious merit and could end up being very cool indeed.

    Welcome back from your Holiday Trip Joen! Get to work on that new installment.

  16. Joen says:

    Jonas,

    Whoever came up with it first deserves some kudos.

    Indeed, though I think tracing the exact source of the idea is all but impossible. I first encountered it back when I was using Movable Type. There were several different plugins to take care of it. Come to think of it, I wonder why the technique never grew popular… Do they know something we don’t?

    Chris,

    This is all very interesting. I am not sure what I like best, I am currently using gravatars and will keep using them until I see a very good reason to leave.

    Indeed, currently there is no reason to switch from Gravatars. The main reason for the development of this plugin / technique, for me atleast, has been to provide a possibly viable alternative to Gravatars, one which is not based on one single server.

    Welcome back from your Holiday Trip Joen! Get to work on that new installment.

    Thank you! Work is coming along quite nicely, I just have a few adjustments and it’ll be done.

    By the way, thanks for leaving this comment, it’s made notice I have to take 32×32 and above icons into consideration 😉

  17. Jacob says:

    Has anyone investigated neither gravatar nor favatar but just plain old avatar? How difficult would it be to have an upload thing somewhere on your site for images of say 40×40 and a field to enter the URLs when posting a comment, this URL could be bunged in the usual cookie so you’re not connecting to loads of different servers and you’re not stressing some central one.

  18. John Serris says:

    OK I figured out why .ico files weren’t working as css backgrounds when I tried. I only tested with my own favicon. It turns out my server was not configured to send .ico with a mime type of image/x-icon.

    I added the following to my .htaccess file:

    AddType image/x-icon ico

    and now it works!

  19. Joen says:

    I added the following to my .htaccess file:
    AddType image/x-icon ico
    and now it works!

    On the downside, and this is something I didn’t notice until applying the favatars as CSS backgrounds myself, the images will no longer scale to fit 16×16 pixels. If i specify that the favatar span or div to be 16×16, it’ll just crop larger icons, unlike the img tag, which will actually scale larger favatars to fit.

    Unfortunately, I don’t see any workaround to this.

  20. John Serris says:

    Joen I can live with that because 99.99% of favicons will only contain a 16×16 icon.

    Just in case anyone is wondering why I want to load the ico as a background image, it’s because window.onload doesn’t trigger untill all IMG tags have loaded their image. On a page with a large number of comments it could take ages for all favicons to load, therefore any javascript you trigger onload will run REALLY late.

    This doesnt happen with css backgrounds because they load AFTER window.onload is triggered.

  21. Shelby says:

    At first I thought “Oh, just another avatar plugin, why that?”. Now I think it is basically a cool idea because you don’t have to provide one single server to contact and so depend on, plus you can reuse the well known favicon feature.

    Currently I am a user of the gravatar plugin but still thinking about to switch to the favatar because not every one has a gravatar account. But here comes a problem in the favatar plugin not mentioned in all other posts: Not every poster does have its own site and so does not have an own favicon.

    So I had the idea to use both plugins together. First do a lookup to the gravatar database. If there is no graphic stored for the user, start the favatar plugin to find it out. It’s just a very “raw thought” but I think I could waste some time on coding that.

  22. I like the idea. Yes, I too remember seeing it done previously, maybe by les orchard? Not sure…

  23. Ben says:

    should we run favatise.php periodic to make all faticon show up?

  24. Joen says:

    Ben,

    should we run favatise.php periodic to make all faticon show up?

    I wouldn’t (and I don’t). As Jeff says, it’s a pretty “hardcore” script.

    The main reason you’d want to do this, is for old archived comments to have their existing or new favicons show up. Whether you care about this, or not, is up to you, but technically there’s no reason why you couldn’t run this script as much as you want. It’s just a bit rough on your server, so don’t do it every day :).

    Another thing, is when people leave a comment but type in “www.example.com” instead of “http://www.example.com”. In the first case, the favicon won’t show up since it’s “not a website”. This problem should be solved otherwise, for instance when a WP comment is left—i.e. [pseudocode]if comment author url is not empty and contains something, check if it needs "http://"[/pseudocode].

  25. Ben says:

    Joen, in my site the favatars of new comments won’t show up if I don’t run favatise.php after they posted the comments 🙁

    I already try it many times 🙁

    If you don’t mind, you can try to write a comment on my blog and see that your favicon won’t show up automatically… 🙂

    any suggestion?

  26. Joen says:

    Ben,

    This sounds like a problem not with favatise.php, but rather with the plugin, or your comments template.

    • Have you made sure to include comment_favicon() where you want the icon to show up?
    • Have you activated the plugin in the admin interface?
    • Have you renamed your wp-comments-post.php file?
    • Perhaps there are some conflicts with the favatar plugin and other plugins you’re using, maybe the “captcha” plugin? Try disabling all comments but the favatar plugin and comment anew.
  27. Ben says:

    Joen,

    • yes
    • yes
    • no

    after I try to disable other plugins one by one, I get the answer…

    yeah, it’s about the conflict with other plugin. No, not captcha but Subscribe To Comments 1.4.2. After I upgrade to 1.4.4, the prombelm solved! 🙂

    Thanks Joen! 🙂

  28. Jeff Minard says:

    I have moved the plugin over to wp-plugins.org now. This is a good thing – versioning, bug tracking, and a wiki.

    I have also made the executive decision to simply title the plugin Favatars. I had made it “revised” since it worked from your’s orginally, but since you retired that version, this kinda makes sense.

    Favatars Wiki Page

    Favatars Code Listing

    😀

  29. Hi Joen,

    First, I love that your last name is Asmussen. Did you ever get made fun of for that? Yeknow, like “ASS-mussen”? Though not as prone to butt-humor, my last name has had some interesting butcherings over the years.

    Second, Favatars are a slick idear, sir! At first, I thought it a much better idea than Gravatars, but then I realized one important factor: many people interested in reading and participating with web logs or similar things will not have a web site. Gravatars are something anybody with an email address and a picture can use, and this is why I think I will stick with them.

    But keep on this idea, and I will probably play with it some day. Your site is quite nice, as well, though I would appreciate a higher contrast option for reading some of the text (and I’m only 22!).

    Peace…

  30. Joen says:

    First, I love that your last name is Asmussen. Did you ever get made fun of for that? Yeknow, like ?ASS-mussen?? Though not as prone to butt-humor, my last name has had some interesting butcherings over the years.

    Oh yes. It’s not so bad in Denmark, where Rasmussen is a fairly common name. As such, it’s usually pronounced properly. It’s the spellings that boggle me. Some of the most common misspellings include:

    • Rasmussen
    • Asmundsen
    • Rasmundsen
    • Assmussen
    • Ammundsen

    I think we’re probably equal when it comes to american mispronunciations of our lastnames. And I don’t blame’em!

    Second, Favatars are a slick idear, sir! At first, I thought it a much better idea than Gravatars, but then I realized one important factor: many people interested in reading and participating with web logs or similar things will not have a web site. Gravatars are something anybody with an email address and a picture can use, and this is why I think I will stick with them.

    Slick idea indeed! I can’t take credit for it, though.

    As for the Gravatars vs. Favatars issue, I’d once again publicly recommend the Gravatar solution—it’s a better package. But it is nice to have a “peer based” alternative.

    But keep on this idea, and I will probably play with it some day. Your site is quite nice, as well, though I would appreciate a higher contrast option for reading some of the text (and I?m only 22!).

    Thank you kindly. As for the text, you may be right, but I’ve already once adjusted it for contrast! I’ll take a look at it.

  31. Oh yes. It?s not so bad in Denmark, where Rasmussen is a fairly common name.

    Well, that is in fact where it originated, I’ve been led to believe. It fits the Scandanavian model, of course.

    Out of curiosity, how exactly would a name in that style be pronounced for you? I suspect that even my version of a “proper” pronounciation may not align with yours, though different languages and accents are surely partly to blame if that is the case.

    For me: Rass-muh-sin

  32. Joen says:

    I think the american pronunciation of “Asmussen” would be the same as your Rasmussen, except without the R sound. It sounds stupid, but the R is also the only difference in the danish language.

  33. Pingback: CrypticScriber
  34. jlacivita says:

    I agree on the point that most people pick lame pop-culture icons for avatar/gravatars, while i’ve never seen someone do that for a favicon. most sites that have them made custom images.

    btw, the live preview on the comments rock!

  35. Joen says:

    Clayton Roth,

    Page load times shouldn’t slow down with the new plugin. The only slowdown is when you press the “Post” button, and it’s only a second or two.

  36. kelvin says:

    testing for 32×32

  37. Joen says:

    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.

  38. Tony says:

    Sounds great, I’ll give it a try.

  39. ryan says:

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

  40. Joen says:

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

  41. Mathilde says:

    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~

  42. Joen says:

    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 🙂

  43. Christoph says:

    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?

  44. Joen says:

    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).

  45. Shelby says:

    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/

  46. DemonDeLuxe says:

    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!

  47. Pingback: Alex Jones
  48. Rob A says:

    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.

  49. Joen says:

    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…

  50. McShelby says:

    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…

  51. Joen says:

    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.

  52. 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. 😉

  53. Joen says:

    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 🙂

  54. Dave Child says:

    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.

  55. Joen says:

    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!

  56. Richard W says:

    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

  57. McShelby says:

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

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

  58. Blythe says:

    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)

  59. Pete Nawara says:

    How do you post your favicon?

  60. Joen says:

    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

  61. touchan says:

    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.

  62. GooL$ says:

    Thats cool…

    but what if you dont have website?

  63. Joen says:

    GooL$ said:

    Thats cool…
    but what if you dont have website?

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

  64. Michael says:

    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.

Comments are closed.