Gerador de Avatar PNG com Iniciais

Letter avatar PNG: o fallback raster para clientes legados

Um letter avatar PNG é o primo raster do avatar SVG de iniciais — pré-renderizado numa grade de pixels fixa (tipicamente 64×64, 128×128, 256×256, 512×512) para funcionar em todo lugar que não fala SVG. A lista de "todo lugar" é maior do que você imagina: o Outlook no Windows tira SVG fora de assinatura de email; Instagram, Discord e Slack só aceitam upload raster para foto de perfil; ícone de home-screen iOS (apple-touch-icon) exige PNG; a imagem Open Graph consumida pelo preview do WhatsApp tem que ser PNG/JPG. Então mesmo projetos que preferem SVG inline para o site entregam uma versão PNG do mesmo avatar para esses pontos de contato.

Geração: Canvas, sharp, Pillow, Vercel OG

Quatro pipelines comuns, na ordem que os devs costumam alcançar:

• Canvas API do navegador — o mais fácil numa ferramenta como esta. Desenha círculo + texto em <canvas>, chama canvas.toBlob('image/png'), dispara o download. Zero servidor.
• Node + sharp — geração em lote no servidor. Renderiza para SVG primeiro, pipe no .png() do sharp com width explícita. Rápido (libvips por baixo) e cacheável.
• Python + Pillow — comum em stacks Django. ImageDraw.text() centralizado num círculo colorido.
• Vercel @vercel/og — componente estilo JSX-React compilado para PNG via Satori. Está na moda para imagens OG; exagero para um avatar de letra única, mas útil se quiser um componente alimentando avatar + card OG.

Tamanhos, compressão e a grade de export certa

A maioria dos produtos fixa 256×256 como tamanho master e faz downscale sob demanda. É grande o bastante para ficar nítido em telas Retina 2× a 128 CSS pixels, pequeno o bastante para manter filesize abaixo de ~5 KB depois de comprimir. Passe o output por pngquant (quantização de paleta 8-bit) para 60–80% de redução sem perda visível; encadeie com optipng ou oxipng para mais 5–15%. Para o slot Apple Touch Icon, gere 180×180 separado — iOS rejeita qualquer coisa que não seja exatamente esse tamanho. Para Open Graph, gere 1200×630 com o avatar de letra centralizado mais o nome da marca; mesma cor de fundo hash amarra a identidade ao avatar.

Cache e APIs sob demanda

Gerar PNG raster é mais caro que SVG (passo de rasterização + compressão), então cacheie agressivo. Padrão clássico: hasheia o input do usuário → usa como chave de cache → guarda o PNG gerado num CDN (Cloudflare R2, S3 + CloudFront, Vercel Edge Network). O ui-avatars.com expõe a API pública mais popular para isso: https://ui-avatars.com/api/?name=João+Silva&size=128 retorna PNG; cacheie no CDN com TTL longo e esquece. Alternativas self-hosted: boring-avatars (componente React, renderiza em canvas), avatar-placeholder (middleware Express), Cloudinary com transformações de text overlay.

PNG vs SVG: quando entregar qual

SVG ganha na web (um arquivo, infinitos tamanhos, ~500 bytes inline, sem requisição extra). PNG ganha em todo o resto: assinatura de email (WiseStamp, Outlook), upload de perfil social (Instagram, LinkedIn), ícone home-screen iOS, preview OG/Twitter, clientes legados que tiram SVG fora. A stack pragmática entrega os dois — SVG inline na shell do app, PNG cacheado no CDN para alvos de export. Contexto brasileiro: ambientes corporativos rodando Outlook BR ainda são comuns — assinatura de email precisa de PNG fallback por mais moderna que seja sua stack.

Perguntas frequentes

PNG ou SVG? Os dois. SVG inline na web para o render mais barato; PNG no CDN para email, upload social e ícone iOS home-screen.

Qual tamanho devo exportar? 256×256 como master. Gere variantes 64/128/512 para thumbnails e Retina; 180×180 dedicado para Apple Touch Icon.

Gera no servidor ou no cliente? Cliente (Canvas API) é ótimo para download avulso numa ferramenta como esta — zero custo de servidor, zero preocupação com privacidade. Servidor (sharp / Pillow / Vercel OG) é o caminho para APIs cacheáveis servindo muitos usuários.

A cor combina entre versões PNG e SVG? Sim — ambas hasheiam a mesma string com o mesmo algoritmo e escolhem a mesma hue. Renderize SVG e PNG da mesma fonte de verdade para ficarem em sincronia.