
Show HN: Generate avatars from user initials - lasserafn
https://ui-avatars.com
======
oever
Two of my favorite avatar generators:

[https://www.peppercarrot.com/en/article391/cat-avatar-
genera...](https://www.peppercarrot.com/en/article391/cat-avatar-generator)

the furry version of

[https://robohash.org/](https://robohash.org/)

~~~
est
generative anime avatars.

[https://hiroshiba.github.io/girl_friend_factory/index.html](https://hiroshiba.github.io/girl_friend_factory/index.html)

[https://makegirlsmoe.github.io/](https://makegirlsmoe.github.io/)

------
wingerlang
Cool to see thai on the header example. However the results doesn't really
make sense, for example this "name" โจ เคน (Jo Keen) has the first letters of
each word จ (j) and ค (k) despite the order. However the service outputs โ (o)
and เ (k).

If you really want to support it, you could maybe put some simple rules (might
work in 90% of all cases) that you only grab the 1st consonant in each word.
However even that won't be 100% correct because.. well, language rules
basically.

------
earlybike
Nice idea. As one wrote, this can easily done with one line of JS but having
this as an web API which returns an image file is definitely neat.

However, I see a privacy issue with sending all my user's real names to some
3rd party service (even if they claim there's no tracking or something
similar).

~~~
dewiz
If you use only the initials, you can cut or fake the other letters since
they're ignored anyway. Not 100% privacy but better than sending the full name

~~~
earlybike
Yes and true but this already half of the API. The rest is just the CSS for
the rounded box and color.

------
bluefin
There's also this:
[https://github.com/tobiaslins/avatar](https://github.com/tobiaslins/avatar)

~~~
lasserafn
That's so cool!

~~~
tobiaslins
Thanks! :) If you have any feedback for improvements, let me know!

------
ComputerGuru
SVG is awesome... but this is a basic enough subset of SVG that SVG is
unwarranted. CSS will do this just fine (and any browser capable of displaying
this SVG can probably support the CSS features required to pull this off).

~~~
lasserafn
I absolutely agree, I would also recommend anyone to use CSS and HTML, it's
pretty straightforward.

However for those that: 1) Don't want to 2) Don't know how to 3) Required
rendering besides HTML views

This can be pretty useful :-) I do agree with you. I would actually consider
adding SVG support to this as well.

------
OJFord
I don't understand why one would prefer an API to a CSS for this?

I'm not even saying don't add the dependency - why should this project be an
API instead of some CSS that I load, and then write:

    
    
        <div class="ui-avatar-com ui-avatar-com-blue">OF</div>
    

The only thing I can see is the gravatar callback (which incidentally has to
use a different endpoint anyway to work-around gravatar not supporting query
params) - is that not as niche of a use as it seemed to me?

~~~
lasserafn
It’s made to be a gravatar fallback :)

The reason its not CSS is because this api generates the initials for you.

CSS is way faster, so I’d recommend that

~~~
OJFord
> The reason its not CSS is because this api generates the initials for you.

It's been a while since I've written any CSS, but I'm pretty sure you can
select first letters? Useful for drop caps, for example.

~~~
lasserafn
Absolutely, but it’s not that simpel, it’s made to be flexible and handle
different logic. Not that it’s magic by any means, it’s fairly simple but
you’d want to generate the initials on the server anyway, to acomplish similar
results

For example, it takes first letter of first name, and 2 letters from last name
if only two names supplied and desired length is 3.

However if 3 names are supplied, it uses a letter from each name.

It’s not magic, but doing it in CSS wouldn’t be easy, I imagine

------
dmitriid
For web this is done with 1 line of Javascript and a div with rounded borders,
really

    
    
       const initials = name.split(' ').map((n) => n.substr(0,1)).slice(0,2).join('')
    
       <div style="border-radius: 9999px; background-color: navy">
         <initials here>
       </div>
    

Adjust width, height, font-size to your liking

~~~
lgessler
Note that the "take the first codepoint" approach doesn't work for all
languages. Take Hindi for example. This is a name:

    
    
        प्रेरणा
        'preraṇa'
    

The convention for initials in Hindi is such that this would be the "initial":

    
    
        प्रे॰ (< प + ् + र + े + ॰)
        'pre'
    

which is the first four codepoints combined (because they are in some sense
considered a single character) _plus_ another codepoint!

If for some reason you needed to respect locale-specific initialism
conventions for a lot of different locales, it might be worth introducing an
abstraction for determining the initials of a name.

~~~
dmitriid
[http://www.kalzumeus.com/2010/06/17/falsehoods-
programmers-b...](http://www.kalzumeus.com/2010/06/17/falsehoods-programmers-
believe-about-names/)

:)

------
CM30
Neat service. Reminds me of this add on for XenForo:

[https://xenforo.com/community/resources/dynamic-letters-
avat...](https://xenforo.com/community/resources/dynamic-letters-avatar-
themescorp-com.5540/)

That said, I've personally never liked using dynamic avatars on websites I'm
involved with. They've always seemed a bit generic, regardless of whether
they're gravatars, these letter avatars, gender symbols, etc.

Always felt it'd work better if my services simply took a random avatar from a
large gallery of thematically appropriate pictures instead. Like say, on a
gaming forum it'd give them a random video game character picture, and on a TV
show forum one from the show in question.

But that's just my opinion on the matter. This seems like it'll work well for
people who like that stuff.

------
latchkey
Woah, Robohash is 6 years old now, time goes so fast...
[https://robohash.org/](https://robohash.org/)

~~~
lasserafn
Wow, that is so cool! Can't believe I haven't seen this before.

------
foxhop
I pulled invatar
([https://github.com/Bekt/invatar](https://github.com/Bekt/invatar)) into my
code base for Remarkbox
([https://www.remarkbox.com](https://www.remarkbox.com))

invatar generates SVG and the way I use it is slightly different, I inline the
SVG directly into HTML!

~~~
lasserafn
also, Remarkbox looks nice

~~~
foxhop
Thanks! Please add yourself to the beta list, I'm launching another group this
weekend!

------
vog
Nice idea! What surprised me most: It is also very well executed, with a sane
and simple API, good performance considerations, and it fits its purpose
almost perfectly.

Having said that, please pardon my ignorance, but:

What's the advantage over simply not using an avatar at all?

~~~
lasserafn
Thanks you!

Honestly? Nothing really. Well, you don't have to think about the code part
but besides that? Nothing. Actually it would be more performant to use CSS and
HTML (or SVG?) to generate avatars. I have a core package (used to generate
the initials), and if used that with html, it would be far better.

I use the service for our internal products, as gravatar fallbacks

------
cyberferret
Nice service - I was looking for something like this to generate default
avatars for our SaaS app recently.

How does it handle middle names? i.e., does "John Arthur Smith" still return
(JS)? What about reverse names, e.g. "Smith, John Arthur"? Is it smart enough
to parse the comma and work out first/last initials from that?

Addendum: I also assume that you intend this service to be a 'once off'
generation of a user avatar which can be stored locally? Do you rate limit so
that people cannot simply dynamically generate avatars for ridiculous long
lists of people on their web page?

~~~
lasserafn
Thank you!

It handles last names and middle names as such:

\- your example would be JS, however if you specify a desired length of 3, it
would be: JAS.

I actually haven’t tested commas and such but I will definitively add this!
Added it to my todo

~~~
cyberferret
Brilliant - thanks for this. Also, would be a nice feature to have the colours
randomise themselves as an option, so that I could have different coloured
avatars on my people listing without having to worry about generating pleasing
colours and ensuring that the foreground and background do not clash.

~~~
lasserafn
It's funny you'd say this! I remember when I launched the core package on
Github, someone suggested colors to be generated from the name or initials. I
will look into this, it would be pretty neat! Thanks for the feedback :-)

~~~
williamdclt
I'd say random is better than generated from initials, to avoid two persons
with same initials having the same avatar!

Random with font color depending on background color (so it's readable and
pretty) would be _even_ better :)

~~~
lasserafn
I love the idea! It's added to my todo :D

------
EthanV2
Pretty neat but it seems the letters do not line up correctly. In such a small
space any slight misalignment is really obvious.

I noticed the <Margin on the left is 16px, on the right is 17px. Similarly
from the top is 21px and the bottom is 20px. It makes it look really off (to
me).

[https://i.imgur.com/NzZ429q.png](https://i.imgur.com/NzZ429q.png)

~~~
lasserafn
Ouch, Yeah appears pretty obvious. Will add some rounding to the sizes or
similar

------
kauegimenes
I like using [http://avatars.adorable.io/](http://avatars.adorable.io/)

------
karmakaze
Very nice.

Noticed that the combination of background and rounded results in a .png with
a non-transparent corners.

[https://ui-avatars.com/api/?background=0D8ABC&rounded=true](https://ui-
avatars.com/api/?background=0D8ABC&rounded=true)

~~~
lasserafn
It’s transparent to me, weird.. I’ll have to look into this. Thanks for
feedback :)

------
lasserafn
Product Hunt: [https://www.producthunt.com/posts/ui-
avatars](https://www.producthunt.com/posts/ui-avatars)

------
mstaoru
No Chinese? [https://ui-avatars.com/api/?name=马云](https://ui-
avatars.com/api/?name=马云)

~~~
lasserafn
Chinese support has been added, good catch! I actually thought I had it
covered.

However due to caching, the request above will not work before tomorrow. You
will have to input another name. I apologize.

I may clear the image cache later today just to fix any issues related to
this.

~~~
mgkimsal
Newly cached example: [https://ui-
avatars.com/api/?name=%E9%A9%AC%E4%BA%91%E9%A9%AC...](https://ui-
avatars.com/api/?name=%E9%A9%AC%E4%BA%91%E9%A9%AC%E4%BA%91&length=4)

Well.. my copy paste didn't work! :(

~~~
lasserafn
Thanks of adding this!:D

[https://ui-avatars.com/api/?name=马云马云&length=4](https://ui-
avatars.com/api/?name=马云马云&length=4) Maybe this works?

Anyway, actually one could add &no-cache and it would ignore cache, I forgot
that part

------
chrismorgan
SVG is good. SVG is well-supported, though for the oldest browsers you’d still
want PNG. Server-side user-agent detection would work fine for that.

~~~
dawnerd
Honest question, is anyone building new apps and actually care about older
browsers? We’re using svg for everything now and haven’t run into a problem
with support.

------
jwatte
That could also just be done with client local JavaScript, with much less
chance of downtime or service load time...

------
nqzero
i'm stuck generating avatars server-side in java - anyone know of a good
package ?

~~~
tyingq
Others pointed out doing it with css works fine.

You could also just generate inline SVG in the html, something like this:
[https://jsfiddle.net/8tfjqjmy/](https://jsfiddle.net/8tfjqjmy/)

~~~
nqzero
i don't control the client (html or javascript) - i'm reimplementing the
server side api

so i need to generate the avatar on the server side as a jpeg

~~~
tyingq
Hmm. The jpeg requirement seems odd. Even if it has "jpg" in the url, you can
serve up a standalone SVG (with a jpg extension in the url) as long as you
send the right MIME type. The example SVG above shows it's probably going to
be lighter weight than pulling in a java image library.

------
aymeric
I love you for creating this.

~~~
lasserafn
I’m so glad to hear such feedback! Thanks!

------
ZykezIX
Awesome!

~~~
lasserafn
Thank you! :)

------
j_s
Hat tip to the evil growth marketing technique (source long lost, sorry)
suggesting use of a default female "outline" avatar to strongly motivate
account creation / gender reassignment (and perhaps even replacement with
genuine profile pictures)!

Edit: Twitter recently discussed changing default avatars, in part because
their default was often left in place as "fun and cute":
[https://blog.twitter.com/official/en_us/topics/product/2017/...](https://blog.twitter.com/official/en_us/topics/product/2017/rethinking-
our-default-profile-photo.html)

My main point was that default avatars can drive sign-ups motivated primarily
just to change it.

~~~
Kiro
What is this referring to?

~~~
wastedhours
Not heard of it before, but my interpretation is:

For a service where the early adopters are predominantly male (perhaps an
invalid assumption, but a lazy tech stereotype), you have the default picture
be the outline of a female to incentivise the male to "correct" the default by
uploading their own picture (demonstrating they're a male, rather than
female).

Interesting thought process if my interpretation is correct.

~~~
wingerlang
And/or that the service seems to have more female participants?

~~~
wastedhours
The OP was referring to an "evil growth marketing tactic" \- it wouldn't be as
evil if it were mainly for empathy with the user base rather than as a dark
pattern.

------
flotillo
Perhaps I'm missing something here, but isn't this just an API that draws two
letters inside a circle?

Why is this at the top of HN and receiving such accolades? It's neither
interesting nor technically challenging.

Am I just missing the satire here?

~~~
lasserafn
However interest is subjective, and it’s obviously interesting to some,
considering the traction it’s gotten.

