Como personalizar o favicon do Blogger no domínio próprio

Usa domínio próprio no Blogger e o favicon não aparece? Aprenda agora como personalizar corretamente o ícone do seu site.

O que é favicon e por que ele é importante?

O favicon é aquele pequeno ícone que aparece na aba do navegador, nos favoritos e até em resultados do Google. Apesar de pequeno, ele tem grande impacto na identidade visual e na credibilidade do seu blog.

Quando você usa um domínio personalizado no Blogger, pode notar que o favicon padrão (do Blogger) volta a aparecer ou simplesmente some. Isso acontece porque o redirecionamento de domínio pode afetar a forma como o navegador carrega os ícones do site.

Formatos e tamanhos recomendados para favicon

  • Extensão: ICO, PNG ou SVG
  • Tamanho ideal: 48x48 pixels ou 32x32 pixels
  • Peso: até 100 KB

Formatos como .ico são amplamente suportados por navegadores antigos e atuais. Já o .png é mais moderno, leve e fácil de editar em ferramentas como Canva ou Photopea.

Passo a passo para alterar o favicon no Blogger com domínio próprio

1. Crie seu favicon personalizado

  • Acesse o Canva ou qualquer editor de imagem
  • Crie um design quadrado com 48x48 ou 32x32 pixels
  • Salve em PNG ou SVG

Você também pode usar sites específicos como:

2. Acesse o painel do Blogger

  • Vá para Configurações → Favicon
  • Clique em Escolher arquivo e envie o seu ícone
  • Salve e aguarde alguns minutos

3. Caso use domínio próprio e o favicon não apareça

Se o favicon não for exibido após a alteração, siga os passos abaixo:

Opção 1: Limpar cache do navegador

  • Abra o navegador
  • Pressione Ctrl + F5 para forçar o recarregamento completo

Opção 2: Adicionar favicon manualmente via código

Você pode inserir diretamente no <head> do seu tema. Vá em Modelo → Editar HTML e insira:


<link rel="shortcut icon" href="URL_DO_SEU_FAVICON" type="image/png">

Substitua URL_DO_SEU_FAVICON pelo link direto do seu favicon hospedado (pode ser no próprio Blogger ou no Imgur).

Exemplo:


<link rel="shortcut icon" href="https://seublog.blogspot.com/favicon.png" type="image/png">

4. Verifique se o favicon foi atualizado corretamente

Você pode usar ferramentas online para confirmar se o favicon foi reconhecido:

Evite esses erros comuns:

  • Enviar imagens maiores que 100 KB
  • Utilizar favicon com fundo transparente e texto ilegível
  • Usar formatos não compatíveis (ex: JPEG ou GIF)
  • Não limpar o cache do navegador após atualizar

SEO e favicon: isso influencia?

Sim. O favicon é mostrado até nos resultados do Google Mobile, ao lado do nome do site. Um ícone sem identidade pode prejudicar a taxa de cliques (CTR). Um favicon bem feito, por outro lado, transmite confiança imediata.

O que fazer se mesmo assim não funcionar?

Se você está usando um domínio personalizado e o favicon continua ausente:

  • Espere até 24h (pode haver atraso na propagação)
  • Teste em outros navegadores
  • Verifique se o domínio está 100% redirecionado (www e sem www)
  • Reenvie o favicon via HTML com link absoluto

Dica extra: use diferentes favicons para diferentes seções

Com conhecimento em código, é possível usar favicons diferentes para páginas específicas, como categorias, produtos ou landing pages. Isso pode reforçar a navegação e criar identidade visual por seção.

Conclusão

Ter um favicon funcional e personalizado é essencial para qualquer blog profissional, principalmente quando você utiliza um domínio próprio. Ele não apenas melhora a identidade do seu site, como também aumenta a credibilidade, ajuda no SEO e valoriza sua marca.

Ao seguir este passo a passo, você garante que o ícone do seu blog esteja visível para seus visitantes, mesmo com domínio personalizado, navegadores modernos e dispositivos móveis.