Reinventing Fire Technology upside down and backwards

August 9, 2010


Filed under: Meta,Technical,Website — Magister @ 8:23 am

What’s a favatar? It’s a favicon! It’s an avatar! It’s a portmanteau!

Well, really, a favatar is a profile picture hosted at the URL a commenter provides, with the filename favatar.png. I made it up!

Okay, so I’m not the first person to make it up. Apparently, a gentleman by the name of Paul James scooped me by a few years, with the same name and a rather similar idea for the same problem. I had this idea out of the blue, while in Montreal for Libre Graphics Meeting 2009, and was dismayed to find, again, that there is nothing new under the sun. So, I put it in my box of maybes.

… Until this weekend, when I added a WordPress plugin to display images for commenters, to make it easier to follow a thread and humanize the conversation. Something that has always bothered me about those images is that they usually come from a third-party service, This is actually owned by the same parent company that develops WordPress, and I am sure it’s a fine service for what it is, but I dislike such centralization where it isn’t necessary. There are some also-ran services like Wavatar, monsterID, OpenAvatar, and so forth, but Gravatar (or “Globally Recognized Avatar”) is the big one.

What’s the chief difference between a favatar (note the small f ) and a Gravatar (note the big G )? A favatar is a convention, not a service. It’s distributed. It’s cooperative. It’s web-like. It’s owned and controlled by the person, not (necessarily) by a proxy or host.

The problem I see with Paul’s original idea around favatars is that it revolves around reusing the favicon.ico, which is typically too small for the purpose of a comment avatar My favicon (though not always: Paul James' favicon), and ‘*.ico’ files don’t display in the <img> element in all browsers. And stylistically, a favicon and an avatar seem to be distinct. As far as I’ve seen, despite a few plugins made, and some good conversation about it, the idea hasn’t really taken off, and the name is just too good to let lie fallow.

So, I put on my hacking mittens, and borrowed code from one or two existing Gravatar WordPress plugins, Easy Gravatars by Dougal Campbell and WordPress Gravatars by Rune Gulbrandsøy. Stir well, bake for 3 hours, and out comes Favatar Plus, my new WordPress plugin. It first looks to see if the commenter has supplied a website address, and if they have a file there called favatar.png (so far, I assume I’m the only person who does). Failing that, it falls back to a Gravatar, then to an Identicon (courtesy of, actually), and ultimately, as a last ditch effort, falls back to their favicon, if found.

My original idea also included linking their image to a vCard called contact.vcf, if found at the same base URL, but in testing that, I found it a little unintuitive… you click it, and suddenly you’re opening iCal to import a stranger’s contact info when you just wanted to read their blog. So, I took that bit out, though I suppose I could make it optional. So, instead, it links to the base URL itself.

I do like the idea of a convention for everyone to expose their “about me” info, along with their favatar and contact info and favorite services, at some dereferenceable URL… a portable profile. Maybe I’ll play with that in some later version.

For now, I’ll see if anyone picks up on this and creates their own favatar.png image. I’ll be tickled pink if someone comments on this post and uses their newly minted favatar.


  1. That’s cool ! Great idea.

    Comment by sroucheray — August 9, 2010 @ 8:48 am

  2. And we have a winner! Stephane, if you’ll be at SVG Open, you can claim your drink there. Otherwise, we’ll have to find out where and when… :)

    Comment by Schepers — August 9, 2010 @ 12:13 pm

  3. Sorry, folks, I may have fixed the problem with comments.  I think it was me playing with my theme, not the Favatar Plus plugin, but let’s see… :(

    Comment by Schepers — August 9, 2010 @ 12:14 pm

  4. It would be nice to be able to keep track of your avatar on your own site, and not have to upload to another site (like Gravatar). I hope this idea gains popularity.

    Comment by Stan Grabowski — August 9, 2010 @ 12:21 pm

  5. That other dude just proved P ≠ NP but with your “favatar” achievement you have certainly shown him and the world who’s really the big boy on the block this week. Congratulations!

    Comment by Michael(tm) Smith — August 9, 2010 @ 12:30 pm

  6. Great idea indeed! Testing my favatar here… 😎
    Would you suggest any size convention? Somehow, gravatar made me think their size is 69×69 so that’s what I made mine, no time left now to make a bigger one…

    Comment by Jacek Kopecky — August 9, 2010 @ 12:33 pm

  7. Looking good! I like letting the user have control of their image everywhere.

    Comment by Steve Conklin — August 9, 2010 @ 12:39 pm

  8. Nice.

    New well-known URLs should be minted under /.well-known/ as specified in RFC 5785:

    Comment by Edward O'Connor — August 9, 2010 @ 12:55 pm

  9. Great idea! Maybe allowing more flexibility, with the same system as favicons ? (default URL but <meta> for user control) This would make your life much harder (having to parse a page) but it could be cool to provide multiple sizes of a favatar.

    Comment by Rik — August 9, 2010 @ 1:03 pm

  10. I can dig it. Much better idea than relying not only on gravatar for identity management but also for their uptime.

    Comment by Paul Irish — August 9, 2010 @ 1:12 pm

  11. Er… yeah, my idea sorta pales a bit in comparison, I suppose. But let’s see how many people create a favatar, and how many people read Deolalikar’s 100 page mathematical proof!

    Comment by Schepers — August 9, 2010 @ 1:23 pm

  12. Jacek, I suppose we could try multiple sizes: favatar-20.png, favatar-40.png, favatar-80.png, favatar-160.png, or favatar-big.png and favatar-small.png and the plugin could decide which to use according to the settings. But I think that’s maybe overkill and overcomplicated.

    My plugin has a default size of 80px, no matter what the original image size is, so I suppose that’s a reasonable convention.

    Comment by Schepers — August 9, 2010 @ 1:32 pm

  13. Ted, without digging too deep into it, I like the idea of /.well-known/ (even if I don’t like the clumsy syntax), so I’ll add support for it in the plugin. It will first look in $url/.well-known/favatar.png, then fall back to $url/favatar.png, before falling back further.

    Comment by Schepers — August 9, 2010 @ 1:36 pm

  14. Rik, I hesitate to make it too flexible, for fear of increasing complexity and slowing it down, but you’re welcome to tweak the source code if you have a concrete idea. Patches (or competing plugins) welcome!

    Comment by Schepers — August 9, 2010 @ 1:39 pm

  15. Ok, let’s see if this thing works this time around :)
    Agree with monsieur Rik – added flexibility of a meta element would be nice for situations where the location or filename is non-standard and/or beyond the control of the user (e.g. shared hosting, with only access to a subdirectory perhaps?)

    Comment by Patrick H. Lauke — August 9, 2010 @ 2:10 pm

  16. I think it is a much simpler solution. But it does pose a problem for those who do not own their own domains.
    It would be nice if other big blogging platforms adopt it too!

    Comment by Divya — August 9, 2010 @ 2:38 pm

  17. Great idea. Can’t resist posting a comment to test…


    Comment by Toni — August 9, 2010 @ 3:36 pm

  18. Thanks, Divya! It shouldn’t be a problem even if you don’t have a domain… as long as there is somewhere you can upload a file called favatar.png, you simply supply that base URL and the image shows up. Obviously, it’s ideal if that also resolves to your blog or profile, but it’s not necessary. I’d love to see this used in other blogging platforms, and if you have suggestions, I’d be happy to write plugins for other blogging tools as well… and I’d be even happier if someone else wrote those plugins!

    I’m not trying to make any money off my plugin, so I encourage “competition”. As long as we can all agree upon what conventions we’re going to follow, (like some solution for multiple sizes, maybe subdirectories like $url/40/favatar.png, $url/80/favatar.png, etc.?), then I will work with anyone else to help this take off.

    Mind you, I wouldn’t turn donations down… :)

    Comment by Schepers — August 9, 2010 @ 4:37 pm

  19. Simple is good!
    80×80 as a “standard” size is certainly good enough IMHO.
    Bloody brilliant Doug – thanks!

    Comment by Jarvklo — August 10, 2010 @ 3:26 am

  20. Great work, Doug; I really like this idea. I hope it catches on, as it’s far better for people to manage their own avatars.

    Comment by Gez — August 10, 2010 @ 4:38 am

  21. I’ve added a small incentive for people to use favatars when commenting on my blog. All favatars will have a border applied, while Gravatars will be unstyled.

    So far, it looks like most of the people who’ve commented have added their own favatar!

    (Note, remember to use a PNG. I could check for other image types, but that would slow down the page load and increase HTTP handshakes to the URL host.)


    Comment by Schepers — August 10, 2010 @ 5:03 am

  22. Why not use a link element, like openid does?, something like
    <link rel=”” href=”favatar.png” />

    Comment by Leigh Klotz — August 10, 2010 @ 1:20 pm

  23. Hi, Leigh, where would I use that?

    If you’re saying that each person could embed that in their home page as a pointer, then to get that image to display the avatar, the platform software (blog plugin, or whatever) would have to fetch that page, parse it, look for the link, then include it. That’s a lot more complex, and would slow down the page load tremendously, since there could be many comment to be treated that way.

    Or maybe I’m misunderstanding you?

    Comment by Schepers — August 10, 2010 @ 1:54 pm

  24. At the moment yes, but if it becomes part of the metadata available from openid, it would be available for a low cost.
    Granted, that’s harder for you do to in a WP plugin because identity is already long since done by that point (even if you’re using it, which you’re not).  But I’d still suggest that you leave open the possibility that an ID service could provide the URI to to you.

    Comment by Leigh Klotz — August 11, 2010 @ 6:16 pm

  25. I think webfinger might be trying to do some of the same things as you are with favatar (for bonus points they recommend using .well-known/ as well :) )

    Comment by Rob Russell — August 21, 2010 @ 3:23 am

RSS feed for comments on this post.

Sorry, the comment form is closed at this time.

Powered by WordPress