Um favicon é o pequeno ícone que o navegador mostra no separador, nos marcadores e no histórico, e no ecrã inicial do telemóvel quando alguém guarda o seu site. Colocá-lo no seu site exige quatro ficheiros e cerca de cinco minutos — e a maior parte da frustração que as pessoas encontram é a cache, tratada na última secção.

O conjunto mínimo que realmente funciona

Não precisa de dezasseis PNGs nem de um browserconfig.xml. Os mosaicos do Windows e os antigos formatos do Internet Explorer estão mortos. Quatro recursos cobrem todos os navegadores e dispositivos em uso real atualmente:

Ficheiro	Tamanho	Porque existe
`favicon.ico`	16 · 32 · 48 (multitamanho)	Navegadores antigos e a Pesquisa Google, que obtém `/favicon.ico` diretamente.
`icon.svg`	vetorial	Os navegadores modernos preferem-no — nítido em qualquer tamanho e pode adaptar-se ao modo escuro.
`apple-touch-icon.png`	180 × 180	Ecrã inicial do iOS e Safari. O iOS ignora SVG aqui, por isso o PNG é obrigatório.
`android-chrome` 192 & 512	192 · 512	Ecrã inicial do Android e PWAs instaláveis, referenciados a partir do web app manifest.

O HTML para colar em <head>

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

O navegador lê as quatro linhas e escolhe o melhor formato que suporta, por isso um Chrome ou Safari atual usa o SVG enquanto um navegador antigo recorre ao .ico. O sizes="48x48" na linha do .ico apenas declara a maior imagem contida no seu interior.

O web app manifest

O manifest é o que permite que as instalações no Android e em PWA usem um ícone adequado. Um site.webmanifest mínimo:

{
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }
  ]
}

O "purpose": "any maskable" permite que o Android recorte o ícone na sua forma adaptativa sem cortar o seu logótipo — desde que deixe uma margem segura à volta (ver Dicas avançadas).

Onde ficam os ficheiros

Coloque todos os ficheiros no diretório raiz do seu site. Os navegadores — e o Googlebot — pedem /favicon.ico a partir da raiz automaticamente, mesmo sem uma tag <link>, por isso mantê-lo aí é a opção mais segura.

Verificar se realmente funcionou

Faça um hard-refresh da página: Ctrl+Shift+R (Windows) ou Cmd+Shift+R (Mac).
Continua sem resultado? Abra o site numa janela privada/de navegação anónima — começa com uma cache vazia.
Carregue cada ficheiro diretamente, por exemplo yourdomain.com/favicon.ico, e confirme que devolve a imagem (HTTP 200), não um 404.
Inspecione o <head> renderizado nas DevTools, não apenas o ficheiro de origem — um passo de compilação ou um CMS pode reescrever os caminhos.

O que mais tempo desperdiça: a cache

Os navegadores guardam favicons em cache de forma mais teimosa do que quase qualquer outro recurso, mantendo por vezes o antigo através de recarregamentos normais. Se um novo ícone se recusar a aparecer:

Faça um hard-refresh, depois feche completamente o separador e abra um novo — a cache do favicon é muitas vezes limitada ao separador.
Durante os testes, adicione um parâmetro de versão para que o navegador o trate como um ficheiro novo: <link rel="icon" href="/favicon.ico?v=2">.
A Pesquisa Google mantém a sua própria cópia e atualiza no seu próprio ritmo — espere dias, por vezes semanas, até que um resultado de pesquisa mostre o novo ícone.

Tudo neste site é executado no seu navegador. A imagem que carrega nunca sai do seu dispositivo — não existe servidor para onde a enviar.

← Voltar ao gerador