Générateur d'avatars par défaut (initiales et motifs)
Générateur d'avatars par défaut
Générateur d'avatars par défaut : avatars à initiales et à motifs en SVG | We.Inc
Créez des avatars à initiales et des avatars à motifs géométriques à partir de n'importe quel nom. Même nom, même avatar. Téléchargez en SVG ou PNG, copiez une data URI, ou générez toute une équipe d'un coup. Code React inclus.
Un avatar par défaut remplace une photo de profil tant que la personne n'en a pas importé une. Le principe habituel : les initiales de la personne sur une couleur choisie à partir de son nom, pour qu'un même nom obtienne toujours le même avatar. Tapez des noms ci-dessous pour créer des avatars à initiales, en dégradé ou à motifs, puis téléchargez les fichiers SVG ou PNG ou copiez le code.
Styles d'avatar de ce générateur
Style
Aspect
Idéal pour
Initiales
Deux lettres sur une couleur unie
Pages équipe, commentaires, CRM
Initiales en dégradé
Deux lettres sur un mélange de deux couleurs
Applications grand public, marques ludiques
Motif
Une grille symétrique de 5 sur 5 carrés
Utilisateurs anonymes, comptes de test, bots
Saisissez un nom ou toute une liste. Chaque nom est haché pour choisir sa couleur et son motif, les résultats restent donc identiques d'un rechargement et d'un appareil à l'autre. La couleur du texte est choisie automatiquement pour le contraste. Rien n'est envoyé.
Tapez des noms, un par ligne. Utilisez de vrais noms, des adresses e-mail ou des identifiants utilisateur ; chacun devient un avatar.
Choisissez un style, une forme (cercle, arrondi ou carré), une palette et une taille.
Les initiales viennent du premier et du dernier mot du nom ; un mot unique utilise ses deux premières lettres.
Téléchargez n'importe quel avatar en SVG ou PNG, copiez son SVG ou sa data URI, ou copiez le composant React qui les crée dans votre propre application.
Hachez un identifiant stable, pas un nom affiché, si les gens peuvent changer de nom. Sinon, la couleur de leur avatar change avec le nom.
Limitez les initiales à deux lettres. Trois lettres en petite taille sont serrées et plus difficiles à lire.
Associez toujours un avatar au nom de la personne, à proximité ou dans le texte alternatif, car une couleur et des lettres seules n'identifient personne pour un lecteur d'écran.
Les avatars SVG restent nets à toutes les tailles et pèsent quelques centaines d'octets, vous pouvez donc les générer à la volée au lieu de stocker des fichiers image.
Questions fréquentes
Comment les couleurs sont-elles choisies ?
Le nom passe par une petite fonction de hachage (FNV-1a) qui le transforme en nombre, et ce nombre choisit une couleur dans la palette. Un même nom produit toujours le même nombre, l'avatar ne change donc jamais tant que le nom ne change pas.
La couleur du texte est-elle accessible ?
Pour chaque fond, le générateur calcule si un texte noir ou blanc offre le plus de contraste, avec la formule de luminance relative des WCAG, et utilise celui-là. Les palettes pastel reçoivent un texte foncé et les couleurs plus soutenues un texte blanc.
Puis-je utiliser ces avatars dans un produit commercial ?
Oui. Les avatars sont créés par votre propre navigateur à partir de vos données et vous appartiennent. L'exemple React de cette page est libre d'être copié dans n'importe quel projet.
Est-ce que cela génère de fausses personnes pour des données de test ?
Non. L'outil crée des images abstraites à partir des noms que vous fournissez, un choix plus sûr pour les démos que des photos de visages réels ou générés.
Pourquoi des avatars déterministes sont utiles
Quand chaque personne garde la même couleur partout, on commence à reconnaître ses collègues dans une longue liste avant même de lire leur nom. Des couleurs aléatoires à chaque chargement de page annulent cet effet, et rendent aussi les captures d'écran et les tests instables.
Le hachage donne des résultats stables sans rien stocker. Le serveur et le navigateur peuvent tous deux dessiner le même avatar à partir du même identifiant.
Le rendu à grande échelle
Pour des listes de centaines de personnes, affichez le SVG en ligne sous forme de composant plutôt que de créer des fichiers image. Cela évite toute requête réseau et garde le balisage léger.
Si vous avez besoin d'une URL d'image, par exemple pour un e-mail ou une balise Open Graph, exportez un PNG une fois par personne et mettez-le en cache, car beaucoup de clients de messagerie n'affichent pas le SVG.
Composant React d'avatar à initiales
Hache le nom, choisit une couleur, sélectionne un texte noir ou blanc pour le contraste et affiche un SVG en ligne. Aucune dépendance.
Calme
Pastel
Mono
Créer des avatars
Noms, un par ligne (jusqu'à 60)
Style
Initiales
Motif
Forme
Cercle
Arrondi
Carré
Palette
Taille : {n}px
Avatar de {name}
Copier
L'utiliser dans React
Le même avatar à initiales sous forme de petit composant à intégrer dans n'importe quelle application React.