Turn any name into a clean letter avatar, like the ones Gmail and Slack show when there is no photo. Choose the shape, colors, font and size, then download a PNG or SVG, copy a data URI, or generate a whole team at once as a ZIP.
Last updated:
64
40
24
Jane Cooper
Shape
Background
Text
Advertisement
Advertisement
How to use the Initials Avatar Generator
Type a name, email or username. The initials and a matching color appear instantly.
Pick a shape and background: keep Auto for name-based colors, or choose your own solid color or gradient.
Adjust the text: font, weight, letter size, text color and number of letters.
Choose the export size, then download PNG or SVG, or copy the SVG code or data URI for your app or HTML.
For a whole list, open Bulk from a list, paste one name per line and click Download ZIP.
Where initials avatars are useful
Default profile pictures in apps, forums, CRMs and help desks before a user uploads a photo.
Team pages and org charts where some people have no photo: one consistent style looks intentional.
Email signatures and chat bots, where a simple monogram is lighter than a photo.
Mockups and prototypes: paste a list of sample names and get a full set of placeholder avatars in seconds.
Recommended sizes
Use
Typical display size
Export size
Comment threads, chat lists
24 to 40 px
128 px (sharp on high-density screens)
Profile headers, cards
64 to 128 px
256 px
Social profile uploads
up to 400 px
400 to 512 px
Print, large displays
any
1024 px PNG or SVG
Using the avatar in code
An SVG data URI can go straight into HTML: <img src="data:image/svg+xml;base64,…" width="40" height="40" alt="Jane Cooper">. Set the displayed size with width and height; the SVG scales without blurring. For a list of users, Bulk mode's CSV export gives you each name, its initials and the data URI so you can import them into a spreadsheet or seed a database.
Frequently asked questions
How are the initials chosen?
By default the tool takes the first letter of the first and last words, so "Mary Jane Watson" becomes MW. Emails use the part before the @ and split on dots, dashes and underscores, and camelCase usernames are split at capital letters. You can force 1, 2 or 3 letters or type custom text.
Will the same name always get the same color?
Yes. In Auto mode the color is chosen from a hash of the name, so "Jane Cooper" always gets the same color in the same palette, on any device. Shuffle colors changes the offset for all names.
Should I use PNG or SVG?
SVG is tiny, scales to any size and is ideal for websites and apps. PNG is best where SVG is not accepted, such as many profile picture uploads, chat apps and email clients.
What is a data URI and how do I use it?
A data URI embeds the image directly in text, for example in an <img src="…"> attribute, CSS background or JSON, so no separate file is needed. Copy it from the Data URI box; the SVG version is usually much shorter than PNG.
Does the SVG look the same everywhere?
The SVG uses common system fonts, so the letters can render in a slightly different font on a device that lacks the chosen font. For pixel-identical results everywhere, use the PNG export.
Is the text readable on every color?
Auto contrast picks white or a dark tint of the background and shows the WCAG contrast ratio. Aim for at least 3:1 for large letters; the info line flags low contrast.
Are names sent anywhere?
No. Everything is generated in your browser. Names and avatars are never uploaded; only your style settings are remembered on this device.
Are all the tools on FreeToolCabin tested for quality and accuracy?
Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.