Favicons SVG: Quando Usar Um, e o ICO que Você Ainda Precisa
Um único SVG pode ser seu favicon mais nítido em navegadores modernos, e pode alternar para o modo escuro a partir de um só arquivo. Ele só não pode ser seu único ícone, então aqui está onde ele se encaixa e o que ele deixa para o .ico e os PNGs.
O que um favicon SVG faz bem
Um favicon é desenhado em tamanhos muito diferentes entre as superfícies, e um único SVG cobre todos eles a partir de um só arquivo. Ele permanece nítido em qualquer tela porque é vetorial, não uma grade fixa de pixels, então não há ampliação borrada nem exports separados de 16, 32 e 48 pixels para manter em sincronia.
Ele tem mais um truque que um ícone raster não consegue igualar: uma media query prefers-color-scheme dentro do SVG permite que o mesmo arquivo se recolora quando o sistema operacional muda para o modo escuro, então a marca continua legível contra uma barra de abas escura sem entregar uma segunda imagem.
Referenciando-o, com os fallbacks
<link rel="icon" type="image/svg+xml" href="/icon.svg">
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Um navegador que entende SVG prefere a primeira linha. Todo o resto está ali para as superfícies que não entendem.
Onde o SVG funciona, e onde não funciona
| Superfície | Usa o SVG? |
|---|---|
| Abas de navegadores modernos | Sim, e é onde ele fica melhor |
| Navegadores mais antigos | Não, eles recorrem ao .ico ou a um PNG |
| O caminho /favicon.ico | Não, essa requisição precisa de um .ico de verdade |
| Tela inicial do iOS | Não, ela usa o apple-touch-icon PNG |
| Instalação Android e PWA | Não, ela lê ícones PNG do manifest |
Fazendo o SVG se adaptar ao modo escuro
Coloque uma media query prefers-color-scheme nos próprios estilos do SVG e deixe-o trocar as cores de preenchimento quando o tema do OS mudar. Um único arquivo então é lido corretamente tanto na interface clara quanto na escura do navegador, que é a forma mais elegante de lidar com um favicon adaptável ao tema.
Se você preferir não manter a media query, uma única marca de tom intermediário com contraste suficiente para sobreviver em qualquer fundo é um caminho mais simples para o mesmo objetivo.
Perguntas frequentes
Devo usar um favicon SVG?
Para a aba do navegador, sim: é um único arquivo, escala perfeitamente e pode se adaptar ao modo escuro. Só o combine com um favicon.ico e app icons PNG para que as superfícies que não leem SVG ainda fiquem cobertas.
Todos os navegadores suportam favicons SVG?
A maioria dos navegadores modernos suporta, mas não todos, e nenhuma superfície de tela inicial usa um. É por isso que você mantém um .ico e PNGs como fallbacks em vez de depender só do SVG.
Ainda preciso do favicon.ico se eu tiver um SVG?
Sim. Navegadores, rastreadores e leitores de feed ainda solicitam /favicon.ico pelo caminho, e essa requisição não pode ser respondida com um SVG. Mantenha um .ico de verdade na raiz do site.
Um favicon SVG consegue fazer modo escuro?
Sim, essa é uma de suas vantagens. Uma media query prefers-color-scheme dentro do SVG o recolora quando o OS troca de tema, então um único arquivo funciona tanto na interface clara quanto na escura do navegador.