Generador de avatar con iniciales

Por qué los avatares con iniciales son la solución correcta

Cuando una app tiene millones de usuarios y la mayoría no sube foto, mostrar el ícono genérico (silueta gris) genera una experiencia visual aburrida y muy repetitiva. La solución que adoptaron Slack, Linear, Notion, Linear y Google Workspace es la misma: iniciales sobre un color derivado del nombre. El resultado es identidad visual sin pedir nada al usuario.

Cómo se deriva el color

La técnica clásica: hashear el nombre a un número, mapearlo a un hue de 0-360 y usar saturación y luminosidad fijas. Eso garantiza:

• El mismo nombre siempre devuelve el mismo color (consistencia entre sesiones).
• Dos nombres distintos casi siempre dan colores distintos (distribución uniforme en el círculo cromático).
• Saturación y luminosidad controladas evitan que salgan colores ilegibles o muy pastel.

function hashHue(s) {
  let h = 0;
  for (const c of s) h = (h * 31 + c.charCodeAt(0)) | 0;
  return Math.abs(h) % 360;
}

Cuántas iniciales mostrar

Una sola inicial parece pobre, tres se sienten cargadas. El estándar es dos letras: la primera del nombre y la primera del apellido. Para nombres de una sola palabra (handles, nombres únicos), usá la primera letra grande. Para nombres compuestos largos, ignorá los nombres del medio.

Tipografía y tamaño correctos

Las iniciales deben ocupar entre 35% y 45% del diámetro del avatar. Usá una sans-serif geométrica con buen peso (Inter Bold, Geist Medium, SF Pro Display Semibold). Texto blanco sobre fondo de color saturado pasa contraste AA con margen.

Avatares cuadrados vs circulares

• Circular: el más universal, asociado a "persona". Slack, X, Twitter, casi todas las redes sociales.
• Cuadrado redondeado: moderno, asociado a "workspace" o "equipo". Linear, Notion, Vercel.
• Cuadrado puro: raro en avatares de persona, común en logos de equipo o canales (Discord servers, Slack workspaces).

Casos de uso

1. Aplicaciones SaaS donde la mayoría no sube foto.
2. Sistemas de comentarios en blogs o documentación.
3. Equipos en una landing page: si todavía no tenés fotos profesionales del equipo, iniciales con color quedan mil veces mejor que silueta.
4. Membership cards y certificados: agregan personalidad sin diseño manual.
5. Apps de gestión interna: usuarios con permisos diferentes pueden tener color de fondo distinto (admin = gradient brand, viewers = gris).

Avatares con gradiente: la diferencia premium

Un solo color de fondo se ve correcto. Un gradiente sutil (mismo hue, dos luminosidades) se ve premium. Es el detalle que diferencia un avatar genérico de uno que se siente diseñado. Probá los dos modos en este generador.