Gerador de Favicon SVG

Por que um favicon em SVG em 2026

O favicon SVG é uma opção relativamente nova dentro do ecossistema de favicons. Suporte real cross-browser só chegou por volta de 2020 com Chrome 80, Firefox 41 (cuja implementação veio antes do Chrome mas com bugs), Edge 80 (Chromium) e suporte parcial no Safari 9. Antes disso, todo site precisava embarcar um ou mais arquivos raster (ICO, PNG) por tamanho. Um único SVG agora substitui boa parte dessa engrenagem por um motivo central: é vetor, portanto renderiza nítido em qualquer densidade — da aba fixada de 16 pixels às superfícies 4K.

Três outras vantagens contam na prática:

• Tamanho de arquivo — um SVG típico de glifo tem 1–2 KB, frequentemente menor que um PNG de 32x32 e muito menor que o contêiner ICO multi-resolução.
• Consciência de tema — o SVG pode carregar seu próprio CSS, trocando cores via prefers-color-scheme, então o favicon se adapta ao modo escuro sem um segundo arquivo.
• Animação — animações SMIL ou CSS dentro do SVG podem pulsar, rotacionar ou mudar de cor; alguns navegadores realmente renderizam isso na aba (outros congelam o primeiro frame).

Markup HTML

Um SVG favicon declarado sozinho deixa navegadores antigos — e o iOS Safari — sem ícone. O padrão robusto declara o SVG primeiro, depois um fallback PNG e em seguida um Apple Touch Icon:

<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">

Os navegadores percorrem a lista e usam o primeiro match utilizável: engines modernas escolhem o SVG, as mais antigas caem no PNG, o iOS Safari puxa o Apple Touch Icon. O atributo type em cada link é o que permite ao navegador pular formatos que não entende sem baixá-los.

Dimensão do viewBox

O viewBox deve ser pequeno — normalmente 0 0 16 16 ou 0 0 32 32. Não há ganho em declarar um viewBox de 512x512: o arquivo fica do mesmo tamanho mas as coordenadas perdem precisão, e o desenho tende a se enroscar em detalhes que somem na renderização real de 16 pixels. Trate o viewBox do favicon como a grade de pixels para a qual você está desenhando, não como uma tela.

Pegadinhas comuns

Vários recursos de SVG são bloqueados ou pouco confiáveis dentro de favicons:

• Nada de <script> dentro do SVG. Todo navegador se recusa a executar JavaScript embutido em favicon — tanto por segurança quanto porque o favicon roda fora do contexto do documento. Scripts inline são silenciosamente ignorados.
• Evite gradientes complexos. Gradientes linear e radial renderizam corretamente, mas a rasterização em 16 pixels tende a borrar as faixas e desbotar cores. Preenchimentos sólidos ficam mais nítidos no tamanho de aba.
• Mantenha os caminhos simples. Combine <rect>, <circle>, <polygon> e caminhos curtos em vez de Béziers longas. A 16 pixels o renderer arredonda tudo para offsets inteiros mesmo.
• Recursos externos falham em silêncio. Um SVG que referencie imagem, fonte ou filtro URL externos não desenha nada — favicons são buscados com permissões restritas.

Theme color, manifest e a superfície de ícones

A tag <meta name="theme-color"> não afeta o favicon — ela tinge a barra de endereço no Android Chrome e a barra de título de PWAs instalados. Combine-a com a cor dominante do favicon para uma superfície de marca coerente.

Um Web App Manifest (manifest.webmanifest) declara ícones PNG de 192x192 e 512x512 para atalhos de tela inicial no Android e splash screens de PWA. O favicon SVG não substitui esses: o Android Chrome lê o manifest, não a cadeia <link rel="icon">, ao criar um atalho de tela inicial.

FAQ

Favicon SVG funciona no Safari?

O Safari suporta favicons SVG desde a versão 9 no macOS, mas restam inconsistências no iOS Safari para a superfície do Apple Touch Icon, que ainda espera um PNG de 180x180. Para Safari desktop, um SVG declarado com type="image/svg+xml" funciona.

Navegador antigo cai no PNG de fallback?

Sim, desde que as duas tags <link> estejam presentes e o PNG venha depois do SVG na ordem do documento. Engines antigas pulam o SVG (tipo desconhecido) e pegam o próximo ícone que conseguem renderizar.

Preciso aplicar máscara para cantos arredondados?

Não, para a superfície de favicon — os navegadores renderizam o SVG como autorado. O Apple Touch Icon é outra história: o iOS aplica a máscara arredondada automaticamente a um PNG quadrado. Dentro do SVG você pode usar <clipPath> para gravar uma forma customizada, mas isso raramente é necessário em 2026.