Favicon SVG: Suporte, Modo Escuro e Fallbacks
Um favicon SVG é um ícone vetorial referenciado com uma tag de link de type image/svg+xml, de modo que um único arquivo renderiza com nitidez em qualquer tamanho em vez de um PNG por tamanho. Por ser um documento, ele pode carregar uma media query prefers-color-scheme e se desenhar de forma diferente no modo escuro. O suporte não é universal: Chrome, Edge e Firefox atuais o renderizam, enquanto o Safari não o usa para o ícone da aba, então mantenha um fallback PNG ou ICO ao lado dele.
Um arquivo em vez de um conjunto
Um favicon raster é uma decisão de tamanho tomada no momento da exportação. Um SVG não é: o navegador o rasteriza no tamanho que a superfície precisa, então uma aba a 16 pixels e uma barra de favoritos a 32 obtêm o mesmo resultado nítido de um único arquivo que costuma ser menor do que um único PNG.
O problema é que o suporte é irregular, e um favicon SVG não substitui o restante do conjunto de ícones. As superfícies de app instalado no Android e no iOS ainda querem PNGs, e o Safari ainda precisa do caminho raster para o ícone da aba. Trate o SVG como um upgrade sobreposto a uma configuração PNG e ICO que já funciona.
Onde um favicon SVG funciona
| Superfície | Comportamento |
|---|---|
| Aba do Chrome / Edge | Renderiza o SVG |
| Aba do Firefox | Renderiza o SVG |
| Aba do Safari | Não o usa; recorre ao seu PNG ou ICO |
| Tela de Início do iOS | Usa o PNG do apple-touch-icon, nunca o SVG |
| Instalação de Android / PWA | Usa os PNGs no web app manifest |
As tags do head
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">Navegadores que entendem image/svg+xml pegam o SVG; os demais caem para o ICO. Sem necessidade de detecção de user-agent.
Um favicon que acompanha o modo escuro
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<style>
path { fill: #111111 }
@media (prefers-color-scheme: dark) {
path { fill: #ffffff }
}
</style>
<path d="M20 80 L50 20 L80 80 Z" />
</svg>Os estilos precisam estar dentro do SVG. Uma folha de estilos externa não é carregada para um favicon. Navegadores que suportam favicons SVG geralmente respeitam isso; os que não suportam simplesmente usam o fallback raster.
Perguntas frequentes sobre favicon SVG
Um favicon SVG pode substituir o favicon.ico?
Não por completo. Qualquer coisa que solicite /favicon.ico por caminho (e qualquer coisa que não renderize favicons SVG) precisa do arquivo raster. O SVG é um acréscimo, não um substituto.
Por que meu favicon SVG não aparece no Safari?
O Safari não usa SVG para o ícone da aba no momento em que este texto foi escrito. Ele recorre a qualquer ícone raster que você tenha declarado, então a solução é garantir que esse fallback exista e fique correto.
rel="mask-icon" é a mesma coisa?
Não. mask-icon é um recurso separado do Safari que pega um SVG monocromático plano e o tinge para abas fixadas. Ele ignora as cores no seu arquivo e não afeta o ícone normal da aba.