Favicons de Modo Escuro (prefers-color-scheme)
Um favicon de modo escuro muda com a configuração clara ou escura do sistema operacional para permanecer legível contra uma interface de navegador escura ou clara. Duas abordagens funcionam: um favicon SVG contendo uma media query prefers-color-scheme que se recolore, ou dois arquivos PNG declarados com media="(prefers-color-scheme: dark)" em suas tags de link. Um único ícone de tom médio que fica legível em ambos é a alternativa mais simples.
Duas formas de fazê-lo responder
A abordagem mais limpa é um favicon SVG com uma media query prefers-color-scheme em seus próprios estilos, de modo que o único arquivo se recolore quando o SO muda para escuro. Navegadores que renderizam favicons SVG e respeitam a media query (incluindo Safari e Firefox) captam a mudança sem tags extras.
A alternativa são dois arquivos raster: um ícone normal e um otimizado para escuro, cada um em uma tag de link carregando um atributo media. O suporte para trocar favicons PNG por media é menos consistente do que a rota SVG, então sempre mantenha um ícone padrão que se sustente por conta própria.
A abordagem de dois arquivos
<link rel="icon" href="/favicon-light.png" media="(prefers-color-scheme: light)" />
<link rel="icon" href="/favicon-dark.png" media="(prefers-color-scheme: dark)" />
<link rel="icon" href="/favicon.ico" sizes="any" />O simples favicon.ico é o fallback para qualquer coisa que ignore o atributo media.
Perguntas frequentes sobre favicon de modo escuro
Como faço um favicon de modo escuro?
Ou coloque uma media query prefers-color-scheme dentro de um favicon SVG para que ele se recolore, ou declare dois PNGs com media="(prefers-color-scheme: dark)" e light em suas tags de link. Mantenha um simples favicon.ico como fallback.
O atributo media em favicons funciona em todos os lugares?
Não. O suporte para trocar favicons por prefers-color-scheme é irregular entre navegadores, e é por isso que você sempre mantém um ícone padrão que funciona independentemente do tema.
Media query SVG ou dois PNGs?
A rota SVG é um arquivo e, em geral, melhor suportada para a troca de tema. Dois PNGs dão controle a nível de pixel por tema, mas dependem de um tratamento de atributo media menos consistente.