Identicon.js

Basic Usage

Specify just a hash, use default background color, margins, and size.
Note: SVGs will produce clearer images (see below). To make PNGs crisper, you can try adding the CSS rule image-rendering: pixelated;

  var hash = 'd6fe8c82fb0abac17a702fd2a94eff37';
  var data = new Identicon(hash).toString();
  document.write('<img src="data:image/png;base64,' + data + '">');

SVG Output

To generate SVGs, set the 'format' option to 'svg'.

  var hash = 'd6fe8c82fb0abac17a702fd2a94eff37';
  var data = new Identicon(hash, {format: 'svg'}).toString();
  document.write('<img src="data:image/svg+xml;base64,' + data + '">');

Options

Specify a hash and an options object to customize background color, margins, size and format.

  var hash = 'd6fe8c82fb0abac17a702fd2a94eff37';
  var options = {
    foreground: [255, 255, 255, 255],
    background: [0, 0, 0, 255],
    margin: 0.2,
    size: 128,
    format: 'svg'
  };
  var data = new Identicon(hash, options).toString();
  document.write('<img src="data:image/svg+xml;base64,' + data + '">');

Raw (Smaller)

The toString() method accepts an optional boolean argument that when set to true will return unencoded image data which is slightly smaller than the default base64 output. In the case of SVG this is still safe to use in a data URI provided that the attribute is double-quoted.

  var data = new Identicon(hash, options).toString(true);
  document.write('<img src="data:image/svg+xml;utf8,' + data + '">');