Identicon5 is a JQuery plugin that takes an MD5 hash and converts it to a unique image. It’s called Identicon5 since it works through the HTML5 Canvas element.

Working Demo Page:  http://francisshanahan.com/identicon5/test.html

Identicons provide a nice visual representation of a user’s identity, that’s unique to that user, without divulging any private information and are in use on many social websites e.g. http://stackoverflow.com/

They do this by generating an image off the MD5 hash of the users’ email address.

Benefits:

Traditionally Identicons are loaded by including an image that links to a service provider such as Gravatar. By using Identicon5 plugin your page can display Identicons without the additional image load and corresponding bandwidth.  You’ll save HTTP requests, your page might render a bit faster and of course you can be buzzword compliant with HTML5 When you get into the Mobile Device world this can really save you significant time in your page rendering.

In the event the browser does not support HTML5, Identicon5 will include the traditional image to Gravatar instead.

JQuery Plugin Page: http://plugins.jquery.com/project/identicon5

Usage:

Include the JQuery and the Identicon5 javascript files:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.identicon5.js"></script>

Define some tags, the inner HTML should contain an MD5 hash:

<ul>
<li>071e3f61671e790fc492b583a01ae22b</li>
</ul>

Lastly, select the tags and call identicon5():

<script type="text/javascript">
$(document).ready(function () {
$('li').identicon5();
});
</script>

if you want to override the default size call it like so:

$('li').identicon5({size:50});

Attributions:

Identicons are based on the work of Don Park and my implementation leverages the work of the PHP implementation located at SourceForge: http://sourceforge.net/projects/identicons/

Screenshot:

If you’re using a browser that supports HTML5 and the canvas tag, the rendered identicons should resemble the following screenshot: