Um logótipo preto sobre fundo transparente fica perfeito num separador claro e invisível num separador escuro. O formato ICO não se adapta, mas o favicon SVG pode fazê-lo: inclui uma regra CSS que altera as cores conforme o tema do navegador.
O problema: um ficheiro, dois fundos
Desde que os navegadores seguem o tema do sistema, a barra de separadores pode ser quase branca ou quase preta para dois visitantes da mesma página. Um favicon monocromático desenhado para um torna-se ilegível para o outro.
Muitos sites contornam o problema acrescentando um fundo opaco colorido ao ícone. Funciona, mas torna o ícone visualmente pesado, enquanto as grandes marcas mantêm um símbolo sem fundo.
A melhor resposta é deixar o navegador escolher, e isso é possível sem JavaScript nem deteção no servidor.
Como funciona o SVG adaptável
Um ficheiro SVG é um documento, não uma imagem fixa: pode conter uma etiqueta style e, portanto, media queries. Ao incluir uma regra prefers-color-scheme: dark, redefine a cor de preenchimento dos traçados quando o navegador usa o tema escuro.
Na prática, o SVG declara uma cor predefinida para o tema claro e depois uma regra que a substitui no tema escuro. O navegador aplica a cor certa ao apresentar o ícone e atualiza o separador imediatamente se o visitante mudar de tema.
O mesmo mecanismo permite ir além de uma simples inversão: pode apresentar um desenho completamente diferente, por exemplo um símbolo sem fundo no tema claro e uma forma preenchida no escuro.
Declarar o SVG juntamente com o .ico
O SVG é declarado com link rel="icon" type="image/svg+xml" href="/favicon.svg". Os navegadores que o suportam dão-lhe preferência, e os restantes recorrem ao favicon.ico da raiz.
Não precisa, por isso, de eliminar nada: os dois ficheiros coexistem, complementando a compatibilidade um do outro. É o princípio da melhoria progressiva aplicado a um ícone de 32 píxeis.
Um aspeto a ter em conta: o SVG de um favicon deve ser autónomo. Um tipo de letra externo, uma imagem remota ou um script não serão carregados neste contexto. O texto deve ser convertido em traçados.
O que o modo escuro não abrange
A variante escura aplica-se ao favicon dos navegadores de computador. Não se aplica ao ícone Apple Touch, que é um PNG opaco fixo, nem aos ícones do manifesto web, que o Android apresenta sobre o seu próprio fundo.
O suporte também não é universal: os navegadores baseados em Chromium e o Firefox leem o SVG adaptável; o Safari fica atrás em algumas versões. Não é um problema, pois o recurso ao .ico é automático.
Desenhe, por isso, o ícone claro como versão predefinida, a que todos os visitantes verão, e trate a variante escura como um aperfeiçoamento para os navegadores que a suportam.
Fontes primárias
Perguntas frequentes
O favicon.ico pode suportar o modo escuro?
Não. O formato ICO guarda imagens rasterizadas fixas, sem qualquer noção de tema. Só o SVG pode incluir uma media query, e é por isso que o conjunto moderno contém os dois.
São precisos dois ficheiros SVG, um claro e outro escuro?
Não, basta um ficheiro. As duas variantes estão no mesmo SVG, separadas pela media query prefers-color-scheme, evitando um pedido adicional e qualquer código de deteção.
Como testar a apresentação no tema escuro?
Mude o tema do sistema operativo e recarregue o separador. No gerador, as pré-visualizações dos separadores claro e escuro aparecem lado a lado, evitando alternar entre os dois.