Generador de avatares: avatares con iniciales y patrones en SVG | We.Inc
Crea avatares con iniciales y avatares de patrones geométricos a partir de cualquier nombre. Mismo nombre, mismo avatar. Descarga SVG o PNG, copia un data URI o genera un equipo entero de una vez. Incluye código React.
Un avatar de marcador de posición ocupa el lugar de la foto de perfil hasta que alguien sube una. Lo habitual es mostrar las iniciales de la persona sobre un color elegido a partir de su nombre, de modo que el mismo nombre siempre recibe el mismo avatar. Escribe nombres abajo para crear avatares con iniciales, degradados o patrones, y luego descarga archivos SVG o PNG o copia el código.
Estilos de avatar de este generador
Estilo
Aspecto
Ideal para
Iniciales
Dos letras sobre un color sólido
Páginas de equipo, comentarios, CRM
Iniciales con degradado
Dos letras sobre una mezcla de dos colores
Apps de consumo, marcas desenfadadas
Patrón
Una cuadrícula simétrica de 5 por 5 cuadrados
Usuarios anónimos, cuentas de prueba, bots
Escribe un nombre o una lista entera. Cada nombre pasa por un hash que elige su color y su patrón, así que el resultado es estable entre recargas y dispositivos. El color del texto se elige automáticamente para que tenga contraste. No se sube nada.
Escribe nombres, uno por línea. Usa nombres reales, direcciones de correo o IDs de usuario; cada uno se convierte en un avatar.
Elige un estilo, una forma (círculo, redondeada o cuadrada), una paleta y un tamaño.
Las iniciales salen de la primera y la última palabra del nombre; si hay una sola palabra, se usan sus dos primeras letras.
Descarga cualquier avatar como SVG o PNG, copia su SVG o su data URI, o copia el componente React que los genera en tu propia app.
Aplica el hash a un ID estable, no al nombre visible, si la gente puede cambiar su nombre. Si no, el color del avatar cambia con el nombre.
Limita las iniciales a dos letras. Tres letras en tamaños pequeños quedan apretadas y cuestan más de leer.
Acompaña siempre el avatar con el nombre de la persona cerca o en el texto alternativo, porque el color y las letras por sí solos no identifican a nadie para un lector de pantalla.
Los avatares SVG se ven nítidos a cualquier tamaño y pesan unos cientos de bytes, así que puedes generarlos al vuelo en lugar de guardar archivos de imagen.
Preguntas frecuentes
¿Cómo se eligen los colores?
El nombre pasa por una pequeña función hash (FNV-1a) que lo convierte en un número, y ese número elige un color de la paleta. El mismo nombre siempre produce el mismo número, así que el avatar nunca cambia salvo que cambie el nombre.
¿El color del texto es accesible?
Para cada fondo, el generador calcula si el texto negro o el blanco tiene más contraste usando la fórmula de luminancia relativa de WCAG, y usa ese. Las paletas pastel llevan texto oscuro y los colores más intensos llevan texto blanco.
¿Puedo usar estos avatares en un producto comercial?
Sí. Los avatares los crea tu propio navegador a partir de lo que escribes y puedes usarlos libremente. El ejemplo de React de esta página se puede copiar gratis en cualquier proyecto.
¿Genera personas falsas para datos de prueba?
No. Crea marcadores de posición abstractos a partir de los nombres que tú indicas, una opción más segura para demos que las fotos de caras reales o generadas.
Por qué ayudan los avatares deterministas
Cuando cada persona conserva el mismo color en todas partes, la gente empieza a reconocer a sus compañeros en una lista larga antes de leer el nombre. Los colores aleatorios en cada carga de página deshacen ese efecto y además vuelven inestables las capturas y los tests.
El hash da resultados estables sin guardar nada. El servidor y el navegador pueden dibujar el mismo avatar a partir del mismo ID.
Renderizado a gran escala
En listas con cientos de personas, renderiza el SVG en línea como componente en vez de crear archivos de imagen. Así te ahorras por completo las peticiones de red y el marcado sigue siendo ligero.
Si necesitas una URL de imagen, por ejemplo para un correo o una etiqueta Open Graph, exporta un PNG por persona una sola vez y guárdalo en caché, porque muchos clientes de correo no muestran SVG.
Componente React de avatar con iniciales
Aplica un hash al nombre, elige un color, decide entre texto negro o blanco según el contraste y renderiza un SVG en línea. Sin dependencias.
Sereno
Pastel
Mono
Crear avatares
Nombres, uno por línea (hasta 60)
Estilo
Iniciales
Patrón
Forma
Círculo
Redondeada
Cuadrada
Paleta
Tamaño: {n}px
Avatar de {name}
Copiar
Úsalo en React
El mismo avatar con iniciales como un pequeño componente que puedes añadir a cualquier app de React.