Gerador de avatar placeholder (iniciais e padrões)
Gerador de avatar placeholder
Gerador de avatar placeholder: avatares com iniciais e padrões em SVG | We.Inc
Crie avatares com iniciais e avatares com padrões geométricos a partir de qualquer nome. Mesmo nome, mesmo avatar. Baixe SVG ou PNG, copie um data URI ou gere um time inteiro de uma vez. Inclui código React.
Um avatar placeholder ocupa o lugar da foto de perfil até a pessoa enviar uma. O padrão comum são as iniciais da pessoa sobre uma cor escolhida a partir do nome dela, então o mesmo nome sempre recebe o mesmo avatar. Digite nomes abaixo para criar avatares com iniciais, gradiente ou padrão, e depois baixe arquivos SVG ou PNG ou copie o código.
Estilos de avatar neste gerador
Estilo
Aparência
Ideal para
Iniciais
Duas letras sobre uma cor sólida
Páginas de equipe, comentários, CRMs
Iniciais com gradiente
Duas letras sobre uma mistura de duas cores
Apps para consumidores, marcas descontraídas
Padrão
Um grid espelhado de 5 por 5 quadrados
Usuários anônimos, contas de teste, bots
Digite um nome ou uma lista inteira. Cada nome passa por um hash que escolhe a cor e o padrão, então os resultados ficam estáveis entre recarregamentos e dispositivos. A cor do texto é escolhida automaticamente pelo contraste. Nada é enviado.
Digite os nomes, um por linha. Use nomes reais, endereços de e-mail ou IDs de usuário; cada um vira um avatar.
Escolha um estilo, um formato (círculo, arredondado ou quadrado), uma paleta e um tamanho.
As iniciais vêm da primeira e da última palavra do nome; uma palavra só usa as duas primeiras letras dela.
Baixe qualquer avatar como SVG ou PNG, copie o SVG ou o data URI, ou copie o componente React que os gera no seu próprio app.
Aplique o hash em um ID estável, não no nome de exibição, se as pessoas puderem mudar o nome. Senão a cor do avatar muda junto com o nome.
Use no máximo duas letras nas iniciais. Três letras em tamanhos pequenos ficam apertadas e mais difíceis de ler.
Sempre acompanhe o avatar com o nome da pessoa por perto ou no texto alternativo, já que cor e letras sozinhas não identificam ninguém para um leitor de tela.
Avatares em SVG ficam nítidos em qualquer tamanho e pesam algumas centenas de bytes, então você pode gerá-los na hora em vez de guardar arquivos de imagem.
Perguntas frequentes
Como as cores são escolhidas?
O nome passa por uma pequena função de hash (FNV-1a) que o transforma em um número, e esse número escolhe uma cor da paleta. O mesmo nome sempre gera o mesmo número, então o avatar nunca muda a menos que o nome mude.
A cor do texto é acessível?
Para cada fundo, o gerador calcula se texto preto ou branco tem mais contraste usando a fórmula de luminância relativa da WCAG, e usa o que tiver mais. Paletas pastel recebem texto escuro e cores mais fortes recebem texto branco.
Posso usar esses avatares em um produto comercial?
Sim. Os avatares são gerados pelo seu próprio navegador a partir do que você digitou e são seus para usar. O exemplo em React desta página pode ser copiado livremente para qualquer projeto.
Isto gera pessoas falsas para dados de teste?
Não. Ele cria placeholders abstratos a partir dos nomes que você fornece, o que é uma escolha mais segura para demos do que fotos de rostos reais ou gerados.
Por que avatares determinísticos ajudam
Quando cada pessoa mantém a mesma cor em todo lugar, os usuários começam a reconhecer colegas em uma lista longa antes de ler o nome. Cores aleatórias a cada carregamento da página desfazem isso e ainda deixam screenshots e testes instáveis.
O hash dá resultados estáveis sem guardar nada. O servidor e o navegador conseguem desenhar o mesmo avatar a partir do mesmo ID.
Renderizando em escala
Para listas com centenas de pessoas, renderize o SVG inline como componente em vez de criar arquivos de imagem. Isso elimina totalmente as requisições de rede e mantém a marcação pequena.
Se você precisa de uma URL de imagem, por exemplo para um e-mail ou uma tag Open Graph, exporte um PNG uma vez por pessoa e guarde em cache, porque muitos clientes de e-mail não exibem SVG.
Componente React de avatar com iniciais
Aplica o hash no nome, escolhe uma cor, define texto preto ou branco pelo contraste e renderiza um SVG inline. Sem dependências.
Sóbria
Pastel
Mono
Criar avatares
Nomes, um por linha (até 60)
Estilo
Iniciais
Padrão
Formato
Círculo
Arredondado
Quadrado
Paleta
Tamanho: {n}px
Avatar de {name}
Copiar
Use no React
O mesmo avatar com iniciais como um pequeno componente que você pode colocar em qualquer app React.