Favicon: o que é e por que a sua marca precisa caber em 16 pixels

Quase todo guia sobre favicon começa pelo arquivo: tamanho em pixels, extensão, gerador online, plugin. É informação útil, e está aqui também. Mas ela pula a pergunta que vem antes: o que, exatamente, vai dentro daquele quadradinho?

A resposta é uma decisão de marca. O favicon é a versão do seu logo que aparece em cada aba aberta, em cada favorito e ao lado do nome do site no Google. Se ela não foi desenhada para esse tamanho, alguém vai improvisar com o logo inteiro espremido, e o resultado é uma mancha que não lembra ninguém.

A seguir, o que é favicon, o que o Google exige para exibi-lo na busca, como escolher entre símbolo, inicial ou monograma, quais arquivos gerar, como instalar no HTML, no WordPress e na loja virtual, e como aprovar a versão final com um teste de três fundos.

O que é favicon?

Favicon é o ícone que identifica um site fora da página: na aba do navegador, na lista de favoritos, no histórico, no atalho salvo na tela do celular e nos resultados de busca. O nome vem do inglês favorite icon, o ícone dos favoritos, e a definição da MDN, a documentação de referência da Mozilla para desenvolvedores web, registra que ele costuma ter 16 x 16 pixels.

Do lado técnico, é só um arquivo de imagem declarado no cabeçalho da página com uma tag link. Do lado da marca, é a aplicação mais repetida da identidade visual: quem trabalha com dez abas abertas vê o seu favicon mais vezes por dia do que vê o seu logo inteiro em qualquer outro lugar.

Por isso o "logo favicon", termo que aparece muito na busca, não é o logotipo reduzido de qualquer jeito. É uma versão própria, pensada para funcionar onde o nome escrito já não cabe.

Onde o favicon aparece hoje?

O ícone começou nos favoritos e se espalhou. Hoje, o mesmo desenho precisa funcionar em lugares com tamanho, fundo e moldura diferentes:

• Aba do navegador: o lugar clássico, minúsculo, com fundo claro ou escuro conforme o tema que a pessoa usa.
• Favoritos e histórico: o ícone ao lado do nome salvo, em lista.
• Resultados do Google: o ícone ao lado do nome do site, no topo de cada resultado orgânico.
• Atalho na tela do celular: quando alguém salva o site na tela inicial, o sistema usa um ícone maior, que pode ser recortado em formato próprio.
• Site instalado como aplicativo: se o site tiver manifesto de aplicativo web, os ícones dele aparecem no inicializador e na troca de janelas.

Cada um desses lugares tem uma regra técnica diferente, que veremos adiante. O ponto de marca é outro: em todos eles, o ícone aparece sem o nome da empresa ao lado com o mesmo destaque. O desenho precisa ser reconhecido sozinho.

Qual a diferença entre favicon, logotipo e ícone de aplicativo?

Os três nascem da mesma identidade, mas têm trabalhos diferentes. Confundi-los é o que leva ao logo horizontal espremido num quadrado de 16 pixels.

Comparativo elaborado pela Alliance Comunicação a partir da documentação do Google Search Central, da MDN e do web.dev.

O que o Google exige do favicon que aparece na busca?

Esta é a parte que os tutoriais costumam resumir em "use 48 x 48". A documentação oficial é mais completa, e cada item dela tem consequência para quem desenha a marca.

Traduzindo para decisões de marca:

• Quadrado 1:1: o logotipo horizontal está fora. A peça precisa ser desenhada para o quadrado, não encaixada nele.
• Representar a marca: o próprio Google coloca essa exigência por escrito. Um ícone genérico de globo ou a letra solta numa fonte padrão não cumprem esse papel.
• URL estável: o arquivo deve morar num endereço fixo. Trocar o nome do arquivo a cada ajuste atrapalha a atualização.
• Dias a semanas: num rebranding, o favicon antigo pode continuar aparecendo na busca por um tempo depois que o site novo entrou no ar. Vale combinar isso com quem aprova o lançamento.
• Sem garantia: cumprir tudo não obriga o Google a exibir o ícone. A regra é condição, não promessa.

A documentação traz mais três pontos técnicos: o Google aceita um favicon por nome de host (www.exemplo.com e loja.exemplo.com podem ter ícones diferentes, mas exemplo.com/loja usa o do site principal), a tag precisa estar na página inicial, e o Googlebot e o Googlebot-Image precisam conseguir rastrear a página e o arquivo. Ícones considerados inadequados são trocados por um ícone padrão.

Por que o favicon é uma decisão de marca, e não só um arquivo?

Porque a cada redução algo da marca precisa sair, e alguém tem de decidir o quê. O caminho do manual até a aba tem degraus: a assinatura completa perde o slogan, depois perde o nome escrito, depois o símbolo encolhe até o ponto em que linhas finas e detalhes internos viram borrão.

Quando essa decisão não é tomada no projeto de identidade, ela é tomada depois, por quem estiver configurando o site, com a ferramenta que estiver à mão. É assim que nascem favicons com o logo inteiro achatado, com fundo branco recortado em quadrado ou com uma letra que não pertence à tipografia da marca.

O favicon é a menor aplicação da marca e a que mais aparece. Se ninguém o desenhou, alguém vai improvisá-lo.

O mesmo raciocínio vale para os outros usos pequenos: avatar de rede social, ícone de aplicativo, carimbo em vídeo. Um manual de identidade visual que prevê quem vai aplicar a marca resolve todos de uma vez, com a versão reduzida documentada.

Símbolo, inicial ou monograma: o que vai no favicon?

Existem basicamente três caminhos, e a escolha depende de como a marca foi construída. Nenhum é melhor em abstrato; o que decide é o que sobrevive à redução e continua parecendo a sua empresa.

1. O símbolo da marca

Se o logo tem um símbolo forte e simples, ele é o candidato natural. Funciona bem quando o desenho tem poucas formas, contornos grossos e silhueta própria. Símbolos com muitos detalhes internos, degradês sutis ou linhas finas costumam precisar de uma versão simplificada só para tamanhos pequenos.

2. A inicial

Para marcas puramente tipográficas, sem símbolo, a inicial costuma ser o caminho. O cuidado é desenhá-la com a tipografia e a cor da marca, e às vezes com ajuste de peso, porque letra fina some em 16 pixels. Uma inicial digitada em fonte padrão não identifica ninguém.

3. O monograma

Duas ou três letras combinadas, quando a inicial sozinha é genérica demais. É a solução mais arriscada no tamanho mínimo: duas letras em 16 pixels disputam pouquíssimo espaço. Vale testar cedo, antes de se apegar à ideia.

Seja qual for o caminho, há uma decisão adicional: o ícone vai solto, com fundo transparente, ou dentro de uma placa com cor própria? A placa garante contraste em qualquer fundo e já antecipa o formato do ícone de aplicativo. O ícone solto é mais leve, mas exige cuidado com o tema escuro, como mostra o teste mais adiante.

Qual tamanho e formato usar para favicon?

Não existe um arquivo único que atenda a todos os lugares. O conjunto mínimo de hoje cobre a aba, a busca, o atalho do celular e a instalação do site. Cada linha da tabela abaixo vem de uma regra documentada.

Google Search Central; MDN; web.dev; documentação do WordPress (consultados em 12/10/2026).

Dois avisos que evitam retrabalho. Primeiro: o SVG não está na lista de formatos aceitos pelo Google para o favicon da busca. Se o site usar um ícone vetorial na aba, declare também uma versão PNG ou ICO. Segundo: o guia do web.dev sobre manifesto de aplicativo web pede ícones de 192 e 512 pixels, e o artigo sobre ícones maskable explica que a borda externa pode ser cortada em algumas plataformas. Por isso o símbolo precisa de respiro dentro do quadrado.

O melhor formato, então, é o conjunto: um ICO ou PNG pequeno para a aba, um PNG grande e quadrado que sirva ao Google e ao atalho, e os ícones do manifesto se o site for instalável. Todos saem do mesmo desenho aprovado.

Como colocar o favicon no site, no WordPress e na loja virtual?

1. No HTML

Coloque o arquivo num endereço fixo do site e declare no head da página inicial, e de preferência de todas as páginas, uma tag no formato <link rel="icon" href="/favicon.png">. O Google aceita os valores icon, shortcut icon, apple-touch-icon e apple-touch-icon-precomposed. Se houver mais de um ícone declarado, o navegador usa os atributos sizes, type e media para escolher o mais adequado.

2. No WordPress

O WordPress tem um campo próprio, o Ícone do site. Segundo a documentação oficial do WordPress, a partir da versão 6.5 ele fica em Configurações, Geral; nas versões 4.3 a 6.4, em Aparência, Personalizar, Identidade do site. A imagem precisa ser quadrada, com pelo menos 512 x 512 pixels, e o PNG é o formato recomendado.

3. Na loja virtual

Plataformas como Nuvemshop e Shopify têm um campo de favicon nas configurações do tema ou da loja. Na Shopify, segundo a central de ajuda da plataforma, ele fica no editor de temas, em Configurações do tema, na seção Logo ou Favicon, e a imagem é redimensionada para 32 x 32 pixels. O favicon da loja é o mesmo conceito: o ícone que aparece na aba de quem está comprando e ao lado do nome da loja na busca. Consulte na central de ajuda da sua plataforma o tamanho que ela pede, e use como origem o mesmo desenho aprovado no manual.

4. Depois de publicar

Abra o site numa janela anônima para conferir a aba sem cache. Para acelerar a leitura pelo Google, o próprio Google indica pedir a indexação da página inicial pela Ferramenta de inspeção de URL do Search Console. Mesmo assim, conte com dias a semanas para ver o ícone novo na busca.

Como testar o favicon em fundo claro e escuro?

O mesmo arquivo vai aparecer sobre fundos muito diferentes: a aba clara, a aba de quem usa o navegador em tema escuro e a página branca de resultados. Um símbolo azul-escuro com fundo transparente fica ótimo no claro e desaparece no escuro. É o defeito mais comum, e o mais fácil de pegar antes da publicação.

Duas saídas resolvem quase todos os casos: usar a placa colorida atrás do símbolo, ou criar uma versão com contorno ou cor clara para o tema escuro. A placa é mais simples de manter, porque é um arquivo só. O critério de contraste da identidade visual ajuda a escolher a combinação de cores que se sustenta nos dois temas.

Por que o favicon não aparece no Google?

Quando o ícone não aparece ou aparece o antigo, a causa costuma estar numa destas situações, quase todas previstas na documentação do Google:

1. Ainda não houve novo rastreamento. A troca leva de dias a semanas, conforme a frequência com que o Google visita a página inicial.
2. A tag não está na página inicial, ou está só em páginas internas.
3. O arquivo ou a página estão bloqueados para rastreamento, por exemplo no robots.txt.
4. O arquivo não é quadrado ou está num formato que o Google não aceita, como o SVG.
5. O favicon está num subdiretório, como exemplo.com/loja, que não pode ter ícone próprio na busca.
6. A URL do arquivo muda com frequência, a cada nova versão do site.
7. Tudo está certo e mesmo assim não aparece: o Google deixa claro que não há garantia de exibição.

Do lado da marca, os erros mais comuns são outros: logo horizontal espremido no quadrado, texto ilegível em tamanho pequeno, fundo branco opaco que vira um quadrado branco na aba escura, cor fora da paleta e versões diferentes do ícone em cada canal porque ninguém registrou qual é a oficial.

O que registrar sobre o favicon no manual de identidade visual?

O favicon só deixa de ser improviso quando vira página do manual. Uma boa entrada tem pouca coisa, mas tudo o que quem vai aplicar precisa saber:

• o desenho aprovado da versão reduzida, com a justificativa (símbolo, inicial ou monograma);
• a versão com placa e a versão solta, se existirem, e quando usar cada uma;
• o tamanho mínimo testado e a malha com a zona de respiro para ícones recortáveis;
• as cores exatas em hexadecimal, já conferidas em fundo claro e escuro;
• a lista de arquivos exportados, com nome, tamanho e onde cada um é usado;
• os usos proibidos: logo horizontal no quadrado, letra em fonte padrão, fundo branco recortado.

Para marcas em criação, isso entra no projeto desde o começo, junto com o símbolo. Para marcas existentes, é uma revisão pontual e barata. Se o seu logo ainda não tem um símbolo que funcione sozinho, vale olhar também o que torna um logotipo de empresa registrável e distintivo, porque a mesma simplicidade que ajuda no registro ajuda no tamanho mínimo.

Por onde começar hoje

1. Abra o seu site em tema claro e em tema escuro e veja o favicon atual na aba. Depois, busque o nome da empresa no Google e confira o ícone no resultado.
2. Se ele for o logo espremido, uma letra genérica ou o ícone padrão da plataforma, decida qual parte da marca vai para o quadrado: símbolo, inicial ou monograma.
3. Desenhe a versão reduzida para 16 pixels, não apenas reduza o arquivo grande, e faça o teste dos três fundos.
4. Exporte o conjunto: ICO ou PNG pequeno, PNG quadrado acima de 48 pixels, apple-touch-icon e, se houver manifesto, 192 e 512 pixels.
5. Publique num endereço fixo, declare na página inicial e registre tudo no manual de identidade visual.

Se a revisão do favicon mostrar que o problema é maior, que a marca não tem uma versão reduzida coerente ou que cada canal usa um ícone diferente, o trabalho é de identidade visual, não de configuração de site. E para saber onde a marca pesa no conjunto da sua comunicação, o diagnóstico de marketing gratuito da Alliance avalia posicionamento, presença digital e os outros pontos de contato.