O que é favicon e por que ele importa no seu site

Abra o navegador e olhe para a fileira de abas no topo. Provavelmente há seis, oito, às vezes quinze abas abertas ao mesmo tempo. Nesse aperto, o título de cada página fica reduzido a duas ou três palavras cortadas — e o que a sua vista realmente usa para achar a aba certa não é o texto: é o desenhinho colorido que vem antes dele.

Esse desenhinho tem nome: favicon. A palavra nasceu da junção de favorite com icon, porque ele apareceu primeiro na lista de sites favoritos, lá nos anos 1990. Hoje ele está em toda parte — na aba, nos favoritos, no histórico, no atalho da tela inicial do celular — e continua sendo um dos detalhes mais esquecidos na hora de colocar um site no ar. É comum encontrar sites bonitos, bem escritos e rápidos que, na aba do navegador, mostram uma folhinha cinza genérica ou, pior, o logotipo da empresa que hospedou o site.

O que é um favicon, na prática

O favicon é a imagem quadrada minúscula que representa o seu site dentro do navegador. Ele não fica dentro da página, como as outras imagens: fica na moldura ao redor dela, naquela área que pertence ao navegador. Por isso muita gente nunca o percebe conscientemente — e mesmo assim usa o tempo todo para se orientar.

O tamanho mais comum em que ele aparece é de 16 por 16 pixels. Para ter ideia do que isso significa, é menos que a área ocupada por uma letra deste parágrafo. Um logotipo com nome da empresa, slogan e três cores vira uma mancha borrada nesse espaço. Entender essa limitação é metade do trabalho de fazer um favicon bom.

Onde o favicon aparece

Ele trabalha em mais lugares do que parece:

• Na aba do navegador, antes do título da página. Quando há muitas abas abertas, o título some e sobra só o ícone.
• Na lista de favoritos e no histórico, ao lado do nome do site.
• Na barra de endereços de alguns navegadores, enquanto a pessoa digita e vê as sugestões.
• No atalho da tela inicial do celular, quando alguém salva o seu site junto com os aplicativos.
• Nos resultados de busca pelo celular: o Google mostra o favicon ao lado do endereço do site.
• Em pré-visualizações de links compartilhados em ferramentas de trabalho e agregadores de conteúdo.

Repare num detalhe da aba: quando o visitante fixa uma aba (aquele clique com o botão direito em "fixar"), o título desaparece por completo. O favicon passa a ser a única coisa que identifica o seu site — e aí ele deixa de ser enfeite para virar a placa da loja.

Por que um quadradinho tão pequeno merece atenção

1. Ele é um atalho de reconhecimento

O cérebro reconhece forma e cor muito mais rápido do que lê palavras. Quem volta ao seu site pela terceira vez já associa aquele símbolo à sua marca e clica sem ler nada. É o mesmo princípio que faz você achar um aplicativo na tela do celular sem olhar o nome embaixo dele. Por isso o favicon é parte da sua identidade visual, e não um detalhe técnico solto.

2. Ele passa (ou tira) credibilidade

A folhinha cinza padrão do navegador comunica uma coisa bem específica: "este site foi montado às pressas". Não é justo, mas é o que a maioria sente. O visitante não pensa a frase inteira; ele só fica um pouco menos à vontade para preencher um formulário ou informar o cartão. E cuidado com detalhes é exatamente o que faz um site profissional gerar mais confiança.

3. Ele ajuda o visitante a voltar

Pense em quem está pesquisando orçamento: abre cinco sites de empresas parecidas em cinco abas e vai comparando. Nesse momento, as cinco abas mostram títulos truncados quase iguais. O site que tem um ícone nítido e colorido é o que a pessoa acha de novo com facilidade — e, muitas vezes, aquele para o qual ela volta primeiro.

Como criar um favicon que funciona em 16 pixels

A regra é simplificar sem descaracterizar. Algumas orientações práticas:

1. Não use o logotipo inteiro. Se o seu logotipo tem símbolo e nome lado a lado, use só o símbolo. Se ele não tem símbolo, use a inicial da marca com a tipografia e a cor corretas.
2. Uma forma, uma ou duas cores. Degradês suaves, sombras e linhas finas simplesmente somem nesse tamanho.
3. Garanta contraste com os dois fundos. Navegadores têm tema claro e tema escuro. Um ícone azul-marinho sem fundo desaparece no tema escuro; resolva colocando o símbolo sobre um quadrado de cor sólida.
4. Deixe uma margem interna. Desenho encostado nas bordas fica sufocado e, no celular, o sistema ainda arredonda os cantos e pode cortar parte dele.
5. Teste no tamanho real. O teste honesto não é olhar o arquivo grande na tela: é publicar, abrir o site numa aba e ver se dá para reconhecer o que é a um metro de distância.

Os arquivos que o seu site precisa

Um favicon completo hoje não é um arquivo só, porque cada dispositivo pede um tamanho. A boa notícia é que todos saem do mesmo desenho:

Do lado técnico, os arquivos ficam na raiz do site e são declarados em duas ou três linhas dentro do cabeçalho de cada página. Quem cuida do seu site resolve isso em minutos; no WordPress e na maioria das plataformas prontas existe um campo chamado "ícone do site", e a própria plataforma gera os tamanhos a partir de uma imagem quadrada que você envia.

Erros comuns com favicon

1. Não ter nenhum. O navegador exibe a folhinha cinza e você perde de graça um reconhecimento que era seu.
2. Manter o ícone de quem construiu o site. Acontece o tempo todo em sites feitos em plataformas de montagem: o ícone da ferramenta continua no lugar e o visitante vê a marca errada.
3. Usar uma foto ou o logo com texto. Em 16 pixels, vira um borrão colorido sem significado nenhum.
4. Enviar uma imagem retangular. O sistema vai espremer ou cortar. O arquivo de origem precisa ser quadrado.
5. Trocar o ícone e achar que não funcionou. O navegador guarda o favicon antigo em cache com afinco; confira em uma janela anônima antes de concluir que deu errado.

Vale acrescentar esse item à sua lista de verificações: sempre que for publicar mudanças, passe os olhos no checklist antes de publicar o site — favicon, títulos, imagem de compartilhamento e formulários costumam ser os quatro esquecimentos clássicos.

Se você leu até aqui e já abriu outra aba para conferir como está o ícone do seu site, esse era o objetivo. E se a resposta foi a folhinha cinza, a saída fácil é deixar isso com quem já entrega tudo pronto: a TH Designer cria os sites com o conjunto completo de ícones — navegador, iPhone, Android e resultado de busca — derivados da identidade visual da sua marca, sem folhinha cinza e sem logotipo de terceiros. Veja nossos serviços e peça um orçamento sem compromisso.

No fim das contas, o favicon é a menor peça da sua marca e, ao mesmo tempo, uma das que mais se repetem no dia de quem visita o seu site. Custa pouco, resolve-se uma única vez e fica trabalhando em silêncio em cada aba aberta.

Perguntas frequentes