Um favicon que se adapta ao modo escuro
Só o SVG consegue responder ao tema do navegador. Incorpore um <style> com uma query prefers-color-scheme dentro do próprio SVG — o navegador aplica-a ao renderizar o ícone. Isto mantém um logótipo escuro visível numa barra de separadores escura:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
path { fill: #111; }
@media (prefers-color-scheme: dark) { path { fill: #fff; } }
</style>
<path d="…your icon path…"/>
</svg>
Referencie-o como <link rel="icon" href="/icon.svg" type="image/svg+xml">. Mantenha um favicon.ico normal ao seu lado para os navegadores e para a Pesquisa Google, que não executam a media query.
Ícone de separador fixado do Safari
Quando alguém fixa o seu separador no Safari para computador, este usa um SVG plano e de cor única separado (um "mask icon") — só forma, sem gradientes:
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#F0562E">
O atributo color define a cor do marcador. Exporte uma versão monocromática da sua marca para isto; qualquer coisa com detalhe fino ou várias cores será renderizada como uma mancha sólida.
Ícones maskable e a zona segura
Os ícones adaptativos do Android recortam a sua imagem num círculo, squircle ou quadrado arredondado consoante o launcher. Um ícone normal fica com os cantos cortados. Marque os ícones do manifest como maskable e mantenha o conteúdo importante dentro da "zona segura" central — sensivelmente os 80% do meio, ou seja, uma margem de ~10% de cada lado:
{ "src": "/android-chrome-512x512.png", "sizes": "512x512",
"type": "image/png", "purpose": "any maskable" }
Desenhe com uma cor de fundo a toda a área e o logótipo confortavelmente dentro dessa margem, para que nenhuma forma o corte.
theme-color: a barra à volta do ícone
Não é o favicon em si, mas fica mesmo ao seu lado em dispositivos móveis — o theme-color colore a interface/barra de endereço do navegador. Também pode reagir ao tema:
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)"> <meta name="theme-color" content="#111316" media="(prefers-color-scheme: dark)">
O que um .ico real realmente contém
Um .ico adequado é um contentor que guarda vários bitmaps de uma só vez — normalmente 16, 32 e 48 píxeis. O navegador escolhe o tamanho de que precisa para a superfície (separador vs. barra de marcadores vs. atalho do Windows), por isso nunca tem de ampliar uma imagem de 16px nem reduzir uma de 512px. Um "favicon.ico" que na verdade é apenas um PNG renomeado perde isso e fica pouco nítido em alguns tamanhos. Este gerador escreve um verdadeiro ICO multitamanho.
Regras de favicon da Pesquisa Google
Para que o seu ícone apareça ao lado do seu resultado, o Google exige tudo o seguinte: o favicon reside num URL consistente; é quadrado e múltiplo de 48×48 (48, 96, 144…); está no mesmo host que o site; a página que o aloja é indexável; e o ícone é visualmente claro. O Google obtém-no e guarda-o em cache com o seu próprio rastreador, separadamente da página — por isso, após uma alteração, conte com dias a semanas e confirme que /favicon.ico devolve 200 ao Googlebot.
Mantenha os ficheiros pequenos
- SVG: remova os metadados e comentários do editor; um SVG de ícone limpo fica muitas vezes abaixo de 1 KB.
- ICO: apenas 16/32/48 — resista a adicionar 64/128/256, que incham o ficheiro sem qualquer benefício.
- PNG: o ícone de 512 é o mais pesado; passe-o por um otimizador sem perdas.
Teste-o onde realmente aparece
Não confie num único navegador. Verifique: um separador normal (claro e escuro), um marcador, um "Add to Home Screen" do iOS, uma instalação no Android e o resultado do Google depois de voltar a rastrear. Uma forma rápida de forçar uma leitura limpa durante os testes é uma janela privada mais um parâmetro ?v= nos URLs dos ícones.