Initials Avatar Generator
The placeholder avatar every app needs: a coloured circle with someone's initials in it. Paste a list of names, get one PNG per name. The colour is derived from a hash of the name, so the same person always gets the same colour — which is the property that makes these useful as stable seed data rather than decoration.
How the initials are chosen
The name is split on spaces, dots, underscores and hyphens, and the first letter of each part is taken until the requested number of letters is reached. "Ada Lovelace" gives AL; "ada.lovelace" and "ada_lovelace" also give AL, which matters when your source data is usernames or email local parts rather than display names. A single-word name falls back to its first letters, so "Ada" becomes AD rather than just A.
One letter is the cleanest at small sizes and the standard for a 32-pixel list avatar. Two is the usual choice at 64 pixels and up. Three gets cramped and is really only for initials that are meaningful as a set, like an organisation's.
Automatic colour, and why it is stable
In automatic mode the name is hashed with FNV-1a and the hash indexes into a twelve-colour palette chosen to be distinguishable and to work with white text. The important consequence is determinism: run the same name tomorrow, or on another machine, and you get the same colour. That is what lets you generate avatars once for a seed database and regenerate them later without everyone's picture changing.
The gradient fill runs from the palette colour to a darker version of itself across the diagonal, which reads as more modern than a flat fill and hides banding at large sizes. Turn it off for a flat, material-style look. If you need a single brand colour for every avatar, switch the scheme to fixed — you lose the ability to tell people apart at a glance, which is most of the point, but it is sometimes what a design calls for.
Every avatar is a separate PNG, and with more than one name you also get a single "download all" button that zips the set — which is the only sane way to take two hundred files.
FAQ
Are the shapes transparent outside the circle?
Yes. Circle and rounded-square are clipped, so the corners are genuinely transparent and the avatar composites onto any background. Square mode fills the whole canvas.
What size should I generate?
Two to three times the largest display size, so it stays sharp on a high-density screen. For a 64-pixel UI avatar, generate at 192 or 256. Generating one large file and letting the browser scale it down is fine; the reverse is not.
Does it handle non-Latin names?
It takes the first character of each word whatever the script, so Cyrillic, Greek and CJK names produce their own initials — a single CJK character is usually the right result and looks correct. Right-to-left scripts render but the two-letter order may not be what a native reader expects.
Is there a limit on the list?
Two hundred names per run, which is a practical guard rather than a technical one — beyond that the page is generating a lot of canvases and blobs at once. Split a larger list into batches.
Can I put an image behind the letters?
Not here. Generate the avatar, then use Overlay images to composite it over something else, or Circle crop to turn a real photograph into the same shape.