Favatars

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, Gravatar.com. 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 Gravatar.com, 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.

25 thoughts on “Favatars”

    1. 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… 🙂

  2. 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… 🙁

  4. 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!

  5. 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…

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

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

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

    1. 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!

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

  11. 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!

    1. 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… 🙂

  14. 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.
     
    Cheers,

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

     

    1. 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?

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

Comments are closed.