Gerador de Favicon com Letras (SVG Avatar)

Favicon de letra em SVG: uma mini marca para qualquer projeto

Um favicon de letra é um monograma SVG de uma única letra que mora na aba do navegador — uma marca rápida, sem precisar de designer, que ocupa o mesmo espaço daquele quadrado colorido arredondado que Notion, Linear e Vercel mostram na aba. Diferente do favicon emoji (limitado ao set do SO) ou do ICO raster (grade fixa de pixels, embaçado em Retina), uma letra SVG é vetorial, escalável, adaptável a tema escuro, e pesa cerca de 200 bytes. A forma canônica é um quadrado colorido mais um nó <text> centralizado, ajustado para o canvas 16×16 do favicon:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <rect width="100" height="100" rx="20" fill="#3b82f6"/>
  <text x="50" y="72" font-size="64"
    font-family="system-ui, sans-serif"
    text-anchor="middle" fill="white">A</text>
</svg>

Por que uma letra ganha de duas iniciais em favicon

Um favicon renderiza em 16×16, 32×32, às vezes 48×48. Duas letras em 16px sobram ~7 pixels por glifo — uma sopa ilegível, ainda mais no ClearType do Windows. Uma letra única em 16px tem ~10 pixels e lê limpo. É por isso que toda PWA moderna que aparece na aba (Notion, Linear, Figma, Vercel) entrega uma marca de uma letra só. Dê padding de 15–20% da borda para a máscara arredondada do Safari no iOS não cortar o glifo, e escolha uma sans-serif: system-ui serve, mas Inter, IBM Plex Sans e Public Sans renderizam mais nítidas em tamanhos minúsculos por terem abertura aberta.

Como entregar o favicon — arquivo ou data URI

Duas estratégias, ambas suportadas desde Chrome 80, Firefox 41, Safari 9:

• Arquivo — salve como favicon.svg e referencie: <link rel="icon" type="image/svg+xml" href="/favicon.svg">. Cacheável e fácil de trocar.
• Data URI inline — <link rel="icon" href="data:image/svg+xml,<svg ...>">. Zero requisição extra — útil em landing pages que disputam cada byte.
• Fallback Apple Touch Icon — Safari iOS ignora favicon SVG no ícone de home-screen. Gere um PNG 180×180 da mesma letra e adicione <link rel="apple-touch-icon">.
• Fallback ICO — para IE/legados, mantenha um ICO 32×32 em /favicon.ico.

Branding, contraste e truque de dark mode

Escolha um fundo que combine com sua cor primária de marca e trave texto branco (ou preto) sobre ele. WCAG 4.5:1 é o piso de contraste; o roxo Stripe #635bff com texto branco dá ~6.1:1 — seguro. Cores hash aleatórias ficam ótimas para avatares de usuário mas destroem a memorização da marca num favicon: use uma cor de marca fixa aqui. SVG também deixa adaptar a dark mode sem segundo arquivo — embute um <style>: @media (prefers-color-scheme: dark) { rect { fill: #fff } text { fill: #000 } }. Os navegadores respeitam media query dentro de SVG.

Quando recorrer a um favicon de letra

Casos: projeto de hackathon que precisa parecer polido em screenshots; PWA sem orçamento para logo; blog pessoal; landing de side project; ferramenta interna que precisa ser distinguível numa floresta de abas. Combine a cor com os avatares do app e a imagem OG e você entrega um sistema de marca pequeno mas coerente. Ferramentas dessa categoria: favicon.io (gerador de letra + export ICO), ui-avatars.com (PNG), realfavicongenerator.net (pipeline multi-formato). Todas convergem na mesma primitiva: quadrado colorido + uma letra grande.

Perguntas frequentes

Uma letra ou duas iniciais? Uma. Em 16×16 duas letras ficam ilegíveis. Pegue a primeira letra da marca ou do primeiro nome do usuário e parou.

Cor aleatória ou cor da marca? Cor da marca. O trabalho do favicon é reconhecimento — hash aleatório quebra isso. Guarde o truque do hash para avatar de usuário, não para o ícone da aba.

Ainda preciso de arquivo ICO? Só se você suporta IE/Edge legado. Navegadores modernos (Chrome 80+, Firefox 41+, Safari 9+) preferem SVG. Um ICO 32×32 como fallback cobre 99% dos casos de borda.

Meu manifest PWA deve usar a mesma cor? Sim. Combine theme_color e background_color no manifest.json com o fundo do favicon para a splash screen, barra de endereço e ícone de aba concordarem.