Favicon ToolsVerificarCriar
Solução de problemas

Conserte um favicon que não aparece ou não atualiza

A mesma aba em branco ou desatualizada, mas com uma causa diferente para cada stack. Encontre a sua abaixo ou escaneie seu site para ver o que ele está servindo.

yoursite.com
yoursite.com
Fixed
Arquivo ou caminho erradoo link não aponta para nada
Configuração de buildnunca foi copiado para a saída
Cache do navegadorícone antigo travado

Next.js

No App Router, o Next.js monta os links do ícone a partir de arquivos no diretório app. Erre o nome do arquivo e ele não emite nada. No Pages Router não existe convenção alguma. Descubra em qual dos dois você está e a correção fica óbvia.

Ler a solução

O arquivo mudou e a aba não. No Next.js isso é um de três caches: o armazenamento de favicon do navegador, um build .next desatualizado, ou um CDN servindo os bytes antigos. Descarte-os nessa ordem.

Ler a solução

React

O React renderiza em um nó do DOM e nunca mexe no head, então o favicon vive em um arquivo HTML estático. Uma aba em branco significa que a tag de link desse arquivo está errada, ou que o ícone foi importado de src e não fica mais em um caminho fixo.

Ler a solução

Você trocou o arquivo e a aba manteve o ícone antigo. Em um app React isso é o navegador fazendo cache do favicon, ou a saída do build e o CDN ainda servindo a cópia anterior de public/.

Ler a solução

Vite

O Vite copia public/ para a raiz da saída e reescreve o index.html em tempo de build. Um favicon que funciona em dev e dá 404 em produção quase sempre tem o segmento public/ no caminho, ou foi importado de src e recebeu hash.

Ler a solução

Vue

Um componente single-file do Vue não consegue renderizar uma tag de link no head, então o favicon é declarado no index.html: na raiz do projeto no Vite, dentro de public/ no Vue CLI. Uma aba em branco significa que a tag desse arquivo está errada.

Ler a solução

Angular

O Angular copia arquivos estáticos apenas se a configuração de build mandar. Um ícone que não é incluído pela entrada assets no angular.json nunca chega ao dist. O build tem sucesso e o arquivo não está lá.

Ler a solução

Astro

O Astro copia public/ para a saída intacto, mas nunca injeta as tags do ícone por você. Uma aba em branco significa que o link não está no layout que suas páginas usam, ou que uma página renderizou seu próprio elemento html e pulou o layout.

Ler a solução

WordPress

O WordPress não serve um favicon a partir de um arquivo que você joga no tema. Ele imprime as tags do ícone a partir de uma única configuração Site Icon, e uma aba em branco quase sempre significa que essa configuração nunca foi aplicada, ou que um tema está brigando com ela.

Ler a solução

Você definiu um novo Site Icon e o antigo não sai. No WordPress isso é quase sempre uma camada de cache (um plugin de cache de página ou um CDN servindo HTML desatualizado) com o próprio cache de favicon do navegador como segundo suspeito.

Ler a solução

Shopify

Na Shopify, o favicon é uma configuração do tema, não um arquivo em um servidor. O tema renderiza um único link de ícone a partir de uma imagem que você escolhe no editor, então uma aba em branco significa que ele não foi definido, que você editou o tema errado, ou que o formato foi rejeitado.

Ler a solução

Você escolheu um novo favicon e a loja ao vivo ainda mostra o antigo. Na Shopify isso é quase sempre um tema em rascunho que nunca foi publicado, ou o CDN de imagens e o navegador fazendo cache do ícone anterior.

Ler a solução