Favicons em Dark Mode: Crie Um Que Se Adapta
Uma marca azul-marinho some contra uma barra de abas escura. Você pode resolver isso a partir de um único SVG, ou de dois PNGs, mas ainda mantém um ícone padrão por baixo.
O que o dark mode realmente muda
A barra de abas do navegador é clara no modo claro e escura no modo escuro. Seu favicon não muda junto a menos que você faça ele mudar. Uma marca que fica nítida no branco pode desaparecer em uma aba quase preta, e o contrário vale para uma marca clara sobre um chrome claro.
Você tem duas formas de responder a isso. Publicar um único SVG que se recolore, ou publicar dois PNGs e deixar o navegador escolher com base na configuração do sistema. O caminho do SVG é um arquivo e uma requisição. O caminho do PNG funciona em mais clientes, mas o suporte a favicons trocados por media é irregular, então ele depende mais do fallback.
Método A: um SVG que se inverte sozinho
Um favicon SVG pode carregar seu próprio CSS. Coloque uma media query prefers-color-scheme: dark dentro do SVG e altere o fill ali. O navegador lê a configuração do sistema e repinta o ícone sem um segundo arquivo e sem link tag extra.
Este é o método a considerar primeiro. É um único arquivo, permanece nítido em qualquer tamanho, e é a única abordagem em que um único recurso cobre os dois temas.
O SVG, com os fallbacks
<!-- In your <head>: SVG first, then the raster fallback -->
<link rel="icon" type="image/svg+xml" href="/icon.svg">
<link rel="icon" href="/favicon.ico" sizes="any">
<!-- icon.svg, with the theme rule baked in -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
path { fill: #1a1a1a; }
@media (prefers-color-scheme: dark) {
path { fill: #f5f5f5; }
}
</style>
<path d="M6 6h20v20H6z" />
</svg>Um navegador que lê SVG usa a primeira linha e respeita a media query. Todo o resto recorre ao favicon.ico.
Método B: dois PNGs em link tags com escopo de media
Se você não puder usar SVG, exporte dois PNGs (digamos, uma versão escura-sobre-clara e uma versão clara-sobre-escura) e sinalize cada uma com um atributo media no seu link tag. O navegador carrega aquela que corresponde ao tema atual.
O suporte a isso é irregular. Alguns navegadores ignoram o atributo media nos links de ícone e simplesmente pegam o primeiro que entendem. É por isso que a última linha importa: um favicon.ico simples sem condição de media é o padrão ao qual qualquer cliente pode recorrer.
A configuração com dois PNGs
<link rel="icon" type="image/png" href="/favicon-dark.png"
media="(prefers-color-scheme: dark)">
<link rel="icon" type="image/png" href="/favicon-light.png"
media="(prefers-color-scheme: light)">
<link rel="icon" href="/favicon.ico" sizes="any">Mantenha o favicon.ico incondicional por último, para que um navegador que ignore as dicas de media ainda tenha um ícone.
O caminho preguiçoso que simplesmente funciona
Se nada disso vale o esforço, use uma única marca de tom médio. Uma cor com contraste suficiente para se ler tanto no chrome claro quanto no escuro (uma cor de marca saturada, nem quase preta nem quase branca) é legível nos dois temas a partir de um único arquivo.
Este é o padrão pragmático. Você perde a correspondência perfeita com cada tema, mas ganha um recurso que nunca desaparece e nenhuma condição de media para errar.
Perguntas frequentes
Como faço um favicon mudar no dark mode?
Use um favicon SVG com uma media query prefers-color-scheme: dark dentro dos seus estilos que troca a cor do fill, ou publique dois PNGs em link tags com escopo de media. Mantenha um favicon.ico simples como padrão de qualquer forma.
Favicons de dark mode funcionam em todos os navegadores?
Favicons SVG com uma media query interna têm bom suporte nos navegadores modernos. Favicons PNG trocados por media são menos confiáveis, então sempre inclua um ícone de fallback incondicional.
Posso ignorar o dark mode e usar um único favicon?
Sim. Escolha uma marca de tom médio com contraste suficiente para se ler tanto em abas claras quanto escuras. É um único arquivo e ele nunca some contra nenhum dos temas.
O favicon.ico precisa mudar no dark mode?
Não. O favicon.ico é o seu fallback padrão para clientes e crawlers mais antigos. Deixe-o como uma única versão legível e trate a troca de tema com os links SVG ou PNG acima dele.