Gerador Favicon SVG (Emoji em Círculo)

Favicon emoji com fundo circular — a variante polida

O truque mais básico de emoji-como-favicon (um único elemento SVG <text> renderizado pela fonte de emoji do SO) entrega um ícone que parece ok numa aba branca e deslocado em qualquer outro lugar: o emoji flutua sobre fundo transparente e herda o formato que a plataforma quiser dar (quadrado em Android antigo, redondo no iOS, anguloso no Windows). A variante circular envolve o emoji em um círculo de cor sólida. O resultado lê como marca deliberada, alinha com ícones de app iOS e ícones de página estilo Notion, e fica certinho contra chrome escuro de navegador.

A estrutura

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="50" fill="#3b82f6"/>
  <text y="78" x="50" font-size="80" text-anchor="middle">🚀</text>
</svg>

Dois elementos fazem o trabalho: um <circle> com r="50" preenche o viewBox de borda a borda, e um <text> centralizado com tamanho em torno de 80% do viewBox segura o emoji. O text-anchor="middle" centra horizontalmente; o y="78" abaixa a baseline pra emoji ficar visualmente centrado (baselines de texto ficam abaixo do centro geométrico, então você precisa empurrar uns 10% pra baixo).

Diferenças do favicon emoji puro

• Cor de marca — escolha um fill do círculo que combine com a paleta do seu produto, transformando instantaneamente um emoji genérico em marca.
• Forma consistente — o círculo é a forma de ícone no iOS, no Android (desde os Adaptive Icons do Android 8) e na maioria dos docks desktop.
• Amigável a dark mode — círculo sólido colorido lê claramente contra chrome claro e escuro de navegador; emoji com fundo transparente pode sumir em aba escura.
• Controle de padding — emoji fica deslocado uns 10% pra dentro da borda do círculo, evitando os recortes que o iOS Safari faz quando arredonda um ícone quadrado.

Embed e suporte de navegador

Inline como data URI — sem arquivo separado no servidor:

<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg ...>">

Favicons SVG são suportados em Chrome 80+ (2020), Firefox 41+, Edge 80+ e Safari 9+ no desktop. Safari iOS 14+ agora renderiza ícone SVG na aba; versões mais antigas caem no PNG que você também declarou. Para PWAs (Adicionar à Tela de Início), ainda é preciso apple-touch-icon raster em 180×180 e ícones de manifesto Android em 192 e 512 — o SVG circular cobre o favicon e o ícone da barra de endereço, raster preenche o resto.

Onde a variante circular brilha

• Single-page apps e side projects que precisam de logo sem contratar designer.
• Demos de hackathon — cinco segundos nessa ferramenta substituem uma sessão no Photoshop.
• Dashboards internos onde consistência vence artistry.
• Marcas que já usam um logo mark circular (ícone do Notion, vermelho do botão de gravar do Loom, etc.).

Perguntas frequentes

Qual a diferença pro favicon emoji puro? A versão pura usa só um emoji em fundo transparente; a variante circular adiciona um disco colorido atrás. Mesmo payload (continua abaixo de 1 KB), resultado bem mais polido — principalmente em abas escuras e contra o grid de tela inicial do iOS.

Funciona no Safari iOS? O ícone de aba desktop funciona em Safari 11+ e de forma confiável a partir do Safari 14+. Ícones de tela inicial do iOS ainda preferem PNG raster via apple-touch-icon — declare os dois e você cobre todas as superfícies.

Dá pra instalar como ícone PWA? Sim, com o fallback padrão de manifesto. Referencie o SVG circular no array icons do manifest com "type": "image/svg+xml", e adicione PNGs raster 192/512 para instalações de tela inicial no Android.

Qual o tamanho do arquivo? Em torno de 200–400 bytes inline, bem abaixo de 1 KB mesmo com espaços. Comparado a um favicon PNG 32×32 (~2 KB) e a um apple-touch-icon 180×180 (~6 KB), o SVG é o ícone mais barato da página.