Avatar Generator (Initials & Identicons)

About the Avatar Generator (Initials & Identicons)

Every app with user accounts needs a picture for people who have not uploaded one. This generator makes them from a name, an e-mail address or any user ID: initials avatars — one to three letters on a circle, rounded square or square — or identicons, geometric patterns of pixels or shapes. The picture is worked out from the text itself, so the same name always gets the same avatar on every page and every device, with no database and no image to store.

Pick the colours (from the name, from a palette of your brand colours, or one colour), the font, weight and letter size, then download SVG or PNG at any size from 16 to 1,024 px, or a ZIP with all common sizes. A list of names becomes a ZIP of avatars with a CSV index. To make the avatars on the fly in your own app, copy the JavaScript snippet: a small function without dependencies that returns exactly the SVG this page shows. Everything runs in your browser.

Common uses

• Default profile pictures for new accounts, comment authors and team members without a photo.
• Placeholder avatars in mock-ups, prototypes and seeded test data.
• Telling apart contributors, devices or API keys at a glance with identicons.
• Contact lists, chat apps and CRMs that need a consistent picture for every contact.

How the picture is chosen

• The text: with Ignore case and extra spaces on, it is trimmed, runs of spaces become one, and it is lower-cased (Unicode NFC first, so accented letters typed in different ways match).
• The hash: the FNV-1a 32-bit hash of its UTF-8 bytes — a fast, well-known non-cryptographic hash. The same text always gives the same number.
• The colour: in From the name mode the hue is the hash modulo 360, with your saturation and lightness; in Palette mode the colour is palette entry number hash modulo the number of colours.
• Initials: the first letter (or digit) of the first and last words — words are split at spaces, dots, hyphens and underscores, and an e-mail address uses only the part before the @. Three letters take the second word too. Accents and vowel signs stay with their letter; a final virama is dropped, so two initials never merge into one conjunct (प्रिया शर्मा gives पश, not प्श); and Arabic initials are kept apart instead of joining into a word — so names in Indian scripts, Arabic or Chinese work.
• Identicons: a small seeded random generator (mulberry32) seeded with the hash fills a 5 × 5 or 7 × 7 grid that is mirrored left to right, or picks the shapes and colours of a 4 × 4 pattern that repeats as you turn it by a quarter.

Readable letters

Auto letter colour chooses black or white, whichever has the higher contrast with the background (WCAG 2 contrast ratio). With a gradient, the darker or lighter end that is worse for the letters decides. The page also checks every colour your settings can produce and shows the lowest ratio: WCAG asks for at least 4.5 : 1 for normal text and 3 : 1 for large text. Forcing white letters on light colours is the usual way to fall below that.

Using the snippet

The snippet is plain JavaScript with your current settings written into it. avatarSvg(name, size) returns an SVG string; use it as an image (img.src = 'data:image/svg+xml,' + encodeURIComponent(svg)), save it as a file in Node (fs.writeFileSync('ada.svg', avatarSvg('Ada Lovelace'))) or return it from an API route as image/svg+xml. It runs in browsers, Node, Deno and serverless functions, needs no package, and gives exactly the same picture as this page for every name. Change a setting here and copy it again to update it.

Limitations

• The letters use fonts installed on the viewer’s device (a system sans-serif, serif, monospace or rounded font), so they look slightly different from one operating system to another. Convert the text to outlines in a vector editor if every pixel must match.
• Colours repeat: in From the name mode there are 360 hues, so two names share a colour about once in 360 tries, and initials repeat often. Avatars help people recognise each other; they do not identify anyone.
• An avatar is not a way to hide an e-mail address: anyone who has the address can make the same picture to check it. Use a random user ID instead of the address if that matters.
• These avatars use this tool’s own algorithm; they do not match GitHub, Gravatar or other services’ identicons.
• Lists are limited to 1,000 names per ZIP, and PNG avatars to 4,096 px.

Privacy

Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot.