Jdenticon is a JavaScript library for creating highly recognizable identities using HTML5 canvas or SVG. It works with both the browser and node.js. Perfect for creating unique avatars as you see them on GitHub.
Must Read: [Bootstrap 5] Responsive Navbar With off-canvas Display on Mobile
Generating Identicons Javascript Library
Post Name | Identicon Generator Jdenticon |
Author Name | dmester |
Category | Image |
Official Page | Click Here |
Official Website | github.com |
Publish Date | December 14, 2020 |
Last Update | July 25, 2023 |
Download | Link Below |
License | MIT |
How to make use of it:
1. Load the Jdenticon library.
<script src="/path/to/dist/jdenticon.min.js"></script>
2. Create a canvas or SVG based mostly on a placeholder for the identical.
<canvas width="64" height="64" data-jdenticon-value="webcodeflow"></canvas> <svg width="64" height="64" data-jdenticon-value="webcodeflow"></svg>
3. The library additionally helps hash values which will be specified within the ‘data-identical-hash’ attribute.
<canvas width="64" height="64" data-jdenticon-hash="hash-value-here"></canvas> <svg width="64" height="64" data-jdenticon-hash="hash-value-here"></svg>
4. API.
// updates all identicon avatars jdenticon.update(); jdenticon.updateCanvas(); jdenticon.updateSvg(); // renders an indenticon avatar jdenticon.drawIcon() // render as a PNG image // NOT available in the browser. jdenticon.toPng() // render as a SVG image jdenticon.toSvg(); // jQuery wrapper $.fn.jdenticon(); // update configs jdenticon.configure(); // or window.jdenticon_config = { };
5. All configurations.
jdenticon.configure({ // Limits the possible hues in generated icons // The hues are specified as an array of hues in degrees. hues: null, // The lightness range of colored/grayscal shapes of an icon. lightness: { color: [0.4, 0.8], grayscale: [0.3, 0.9] }, // Specifies the saturation of the originally colored/grayscale shapes of an icon. saturation: { color: 0.5, grayscale: 0.0 }, // Background color backColor "#000000", // Padding padding 0.08, // "never" – icons are never rendered automatically. You need to call jdenticon.update() manually to render identicons. // "once" – icons are rendered once the page has loaded. Any dynamically inserted or modified icons will not be rendered unless jdenticon.update() is manually called. // "observe" – icons are rendered upon page load, and the DOM is monitored for new icons using a MutationObserver. Use this if icons are inserted dynamically, e.g. by using Angular, React or VanillaJS. This option behaves as "once" in IE<11. replaceMode: "once" });
JavaScript API
Below is the Jdenticon interface described. In most cases, the HTML attributes are enough for using Jdenticon. Check them out before reading the rest of the API.
Html attributes
data-jdenticon-value | Specified on a <canvas> or <svg> element to declare that an identicon should be rendered for this value within the element. |
data-jdenticon-hash | Specified on a <canvas> or <svg> element to declare that an identicon should be rendered for this hexadecimal hash string within the element. |
Methods
jdenticon() | Updates all <canvas> or <svg> elements with the data-jdenticon-value or data-jdenticon-hash attribute. |
jdenticon.update() | Updates the identicon in a specific DOM element or for all elements matching a CSS selector. |
jdenticon.updateCanvas() | Updates the identicon in a specific <canvas> element or for all elements matching a CSS selector. |
jdenticon.updateSvg() | Updates the identicon in a specific <svg> element or for all elements matching a CSS selector. |
jdenticon.drawIcon() | Renders an indenticon on an HTML canvas. |
jdenticon.toPng() | Renders an identicon as a PNG image. Not available in the browser. |
jdenticon.toSvg() | Renders an identicon as an SVG image. |
jdenticon.configure() | Configures the appearance of generated icons and the behavior of Jdenticon. |
$.fn.jdenticon() | jQuery wrapper plugin for updating all identicons in a query element collection. |
See Demo And Download

Official Website(dmester): Click Here
This superior jQuery/javascript plugin is developed by dmester. For extra Advanced Usage, please go to the official website.