SVG Favicon Emoji

Favicon SVG com emoji — o truque de seis linhas que viralizou

No começo de 2020 Lea Verou e Igor Sheludko publicaram um one-liner que transforma um emoji em favicon completo usando apenas um SVG inline com um único elemento <text>. O hack é absurdamente simples: navegadores com suporte a favicon SVG renderizam o emoji usando a fonte do sistema operacional, ou seja, o ícone da aba se adapta ao estilo Apple, Android, Microsoft ou Twemoji de graça — sem exportar PNG, sem sprite de múltiplos tamanhos, sem arquivo separado.

O SVG mínimo é:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <text y=".9em" font-size="90">🚀</text>
</svg>

E você embute direto no HTML, sem arquivo separado no servidor, como data URI:

<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🚀</text></svg>">

Por que funciona

O <text> SVG cai na stack de fonte do sistema, e sistemas operacionais modernos vêm com uma fonte de emoji colorida (Apple Color Emoji, Segoe UI Emoji, Noto Color Emoji). O navegador desenha o glifo no tamanho pedido e usa como ícone da aba. Como a renderização é delegada ao SO, o emoji sempre parece "nativo" — usuários Safari veem o emoji da Apple, Windows vê Microsoft, Android vê Google. A forma se adapta à plataforma sem nenhum trabalho extra.

Suporte de navegador e fallbacks

Chrome 80+, Firefox 41+ e Safari 9+ renderizam favicon SVG. O suporte do Safari é instável entre versões, especialmente no iOS, onde o ícone da aba e o ícone da tela inicial são coisas diferentes: favicons SVG funcionam para a aba no desktop, mas o ícone de tela inicial do iOS ainda exige PNG via apple-touch-icon. O padrão seguro é declarar os dois:

<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" href="/favicon.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Quando usar (e quando não)

• Perfeito para: prototipagem rápida, MVPs, sites pessoais, dashboards internos, branding de baixo esforço, favicon por página (emoji diferente por rota).
• Adoções famosas: blog da Lea Verou, docs do @vercel/og, templates do GitHub Pages, dezenas de geradores de site estático.
• Evitar quando: branding sério de produto (renderização varia muito entre vendors — estilo flat da Apple vs 3D antigo da Microsoft vs Android antigo), logos pixel-perfect, qualquer coisa que precise ser legível abaixo de 16px.

Perguntas frequentes

Funciona no Safari do iOS? As versões desktop e iPad do Safari renderizam o favicon SVG corretamente. O ícone de tela inicial do iOS (quando o usuário "Adiciona à Tela de Início") ainda exige PNG real via apple-touch-icon — o caminho SVG é ignorado nesse fluxo.

Adapta a dark mode? De certo modo sim — o glifo é renderizado pela fonte do SO e fontes de emoji coloridas já vêm pré-coloridas. O ícone não se recolore, mas os pixels coloridos contrastam bem tanto com chrome claro quanto escuro do navegador.

O favicon aparece em impressão ou PDF? Favicons não são impressos pelo navegador, mas se você embutir o SVG em outro ponto da página (ex.: como logo), ele será impresso como emoji do SO, inclusive em fluxos imprimir-para-PDF.

Dá pra ter visual consistente entre plataformas? Não com abordagem puramente emoji. Se você precisa de consistência byte-a-byte, troque para Twemoji SVG (set open-source do Twitter) e embuta os paths — mas aí você troca o hack de seis linhas por um ícone SVG normal.