O ícone minúsculo com impacto descomunal

Um favicon é o pequeno ícone exibido nas guias do navegador, listas de favoritos, histórico do navegador e – desde 2019 – nos resultados de pesquisa do Google para celular. Essas pequenas imagens carregam um peso de marca desproporcional. A pesquisa mostra que os usuários distinguem entre guias abertas principalmente usando o reconhecimento de favicon, e não o texto da guia. Um favicon ausente ou genérico torna seu site mais difícil de encontrar entre várias guias abertas.

Tamanhos e formatos de favicon

FormatarTamanhoObrigatório para
OIC16×16, 32×32Suporte para guias de navegador legado
png192×192Ícones da tela inicial do Android, PWA
png512×512Telas iniciais PWA, telas de alto DPI
Ícone de toque da Apple180×180iOS "Adicionar à tela inicial"
SVGEscalávelNavegadores modernos — perfeitamente nítidos em qualquer tamanho

A conexão da Pesquisa Google

Desde 2019, o Google exibe favicons de sites próximos aos URLs nos resultados de pesquisa para dispositivos móveis. Um favicon ausente mostra um ícone de globo genérico. Um favicon pixelizado ou de baixa qualidade sinaliza aos usuários – e potencialmente aos sinais de qualidade do Google – que um site pode ter manutenção inadequada. Manter seu favicon nítido e atualizado é uma consideração de SEO pequena, mas real.

💡 Dica profissional:Projete seu favicon para funcionar em 16×16 pixels. Comece com um design vetorial grande e, em seguida, otimize especificamente a versão minúscula – não apenas reduza. Detalhes que ficam ótimos em 256px geralmente se tornam manchas turvas em 16px.

Como adicionar um favicon ao seu site

  1. Crie seu favicon como um PNG 512×512 primeiro
  2. Gere ICO (vários tamanhos: 16, 32, 48) usando um conversor
  3. Lugarfavicon.icono diretório raiz do seu site
  4. Adicione ao seu HTML<cabeça>: <link rel="icon" href="/favicon.ico">
  5. Adicionar ícone do Apple Touch:<link rel="apple-touch-icon" href="/apple-touch-icon.png">
  6. Consulte ícones de 192px e 512px em seumanifesto.jsonpara suporte PWA
Por que alguns sites mostram um favicon quebrado?

As causas mais comuns: caminho de arquivo incorreto no HTML, servidor retornando um 404 para favicon.ico ou restrições CORS bloqueando solicitações de favicon entre domínios. A maioria dos navegadores armazena em cache as solicitações de favicon de forma agressiva – limpe o cache do navegador após fazer alterações no favicon.

Pronto para experimentar você mesmo?

Capitão de favicons Mais guias