Notas sobre favicons

Guia · leitura de 3 min

Porque é que o seu favicon não atualiza — e como forçá-lo

Mudou o favicon, publicou, atualizou — e o antigo continua lá. Esta é, de longe, a queixa mais comum sobre favicons, e quase nunca é um problema de código. Os navegadores guardam favicons em cache de forma muito mais agressiva do que páginas ou imagens, e a cache do favicon sobrevive muitas vezes a um recarregamento normal.

Resolva-o por esta ordem:

• Hard refresh. Ctrl+Shift+R (Windows) ou Cmd+Shift+R (Mac) recarrega ignorando a cache da página.
• Reabra o separador. A cache do favicon está frequentemente ligada ao separador aberto. Feche-o completamente e abra um novo.
• Quebre-a com um parâmetro. Aponte o link para um URL "novo" durante os testes: <link rel="icon" href="/favicon.ico?v=2">. Aumente o número a cada alteração.
• Confirme que o ficheiro está mesmo lá. Carregue yourdomain.com/favicon.ico diretamente — se der 404, o navegador está a mostrar um ícone em cache de um ficheiro que já não existe.

A Pesquisa Google é um caso à parte. Guarda o seu favicon em cache separadamente das suas páginas e atualiza segundo o calendário do Google, por isso um novo ícone nos resultados de pesquisa pode atrasar-se dias ou semanas mesmo depois de o seu site estar correto. Não há botão para acelerar isso — certifique-se de que /favicon.ico devolve 200 ao Googlebot e espere.

Opinião · leitura de 4 min

Pare de gerar 20 ficheiros de favicon — o conjunto mínimo de 2026

Muitas ferramentas de favicon ainda lhe entregam um ZIP com dezasseis PNGs, um browserconfig.xml e imagens de mosaico da Microsoft. Quase tudo isso é peso morto. Os mosaicos do Windows foram descontinuados com a interface Live Tiles; a pilha de tamanhos de PNG intermédios resolvia um problema de navegador que já não existe.

Aqui fica o conjunto que cobre tudo o que se usa atualmente:

• favicon.ico — multitamanho (16/32/48), para navegadores antigos e a Pesquisa Google.
• icon.svg — um ficheiro escalável que os navegadores modernos preferem, com suporte para modo escuro.
• apple-touch-icon.png — 180×180 para ecrãs iniciais do iOS.
• PNGs android-chrome-192 e -512 — referenciados a partir do seu web app manifest para Android e PWAs.

Cinco ficheiros, quatro referências de <link>/manifest, feito. Menos ficheiros significa menos para manter sincronizado, um deploy mais leve e nenhum browserconfig.xml desatualizado a apontar para imagens que apagou. Se uma ferramenta insiste que precisa de vinte, está a otimizar para parecer minuciosa, não para aquilo que os navegadores pedem.

Técnica · leitura de 3 min

Favicons SVG e modo escuro: um ícone que se adapta

Um logótipo escuro fica nítido numa barra de separadores clara e quase desaparece numa escura. Fornecer dois ficheiros e trocá-los é trabalhoso. Com um favicon SVG pode deixar que um único ficheiro reaja ao tema do navegador, porque o navegador aplica o CSS dentro do SVG quando renderiza o ícone.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .glyph { fill: #111; }
    @media (prefers-color-scheme: dark) { .glyph { fill: #fff; } }
  </style>
  <path class="glyph" d="…"/>
</svg>

Referencie-o com <link rel="icon" href="/icon.svg" type="image/svg+xml"> e mantenha um favicon.ico simples como alternativa — os navegadores mais antigos e a Pesquisa Google não avaliam a media query, por isso também precisam de um ícone estático. O resultado: num sistema claro o glifo é escuro, num sistema escuro muda para claro, a partir de um pequeno ficheiro.