Favicon é o ícone pequeno que aparece na aba do navegador ao lado do nome do site. É a menor peça da sua marca: cabe num quadrado de 16 por 16 pixels (pontos de tela). Quando não existe, o navegador mostra um ícone genérico (no Chrome, um globo cinza), e o seu site parece abandonado.
O cliente abre várias abas comparando presentes de Dia das Mães, e a sua é a que ele acha de novo pelo ícone. E o Google pode mostrar o favicon ao lado do nome do site nos resultados da busca.
Por que o logo inteiro não serve como favicon?
Porque 16 pixels não comportam nome, slogan e desenho. O favicon precisa ser um símbolo: a inicial da empresa, uma forma do logo, ou a cor da marca com um traço reconhecível.
Regra prática: se o logo tem um símbolo separado do nome, o favicon é o símbolo. Se o logo é só o nome escrito, o favicon é a primeira letra na fonte e na cor da marca. Esse mesmo símbolo serve para ícone de aplicativo e perfil do Instagram: https://avilaops.com/guias/logo-em-fundo-escuro-e-icone-de-aplicativo/.
Quais tamanhos e formatos são necessários?
O navegador pede mais de um arquivo, porque o ícone aparece em lugares diferentes:
- 32 por 32 pixels, em PNG ou ICO: a aba no computador.
- 180 por 180 pixels, em PNG: quando alguém salva o site na tela inicial do iPhone (apple-touch-icon).
- 192 por 192 e 512 por 512 pixels, em PNG: Android e Google.
- Um arquivo SVG (desenho vetorial, que não perde qualidade ao ampliar), quando o navegador aceita.
Quem monta o site coloca esses arquivos e as linhas de código que apontam para eles. Se você contratou site e o favicon não apareceu, pergunte. O que compõe a marca inteira está em https://avilaops.com/guias/o-que-e-identidade-visual-o-que-entra/.
Se o logo de uma loja é "Casa Flor" escrito em verde, o favicon é um "C" verde sobre fundo branco, na mesma fonte. Na busca, ao lado do nome da loja, aparece o "C" verde. No Instagram, o perfil usa o mesmo "C".
O que fazer agora
Abra o seu site e olhe a aba. Se aparece um globo cinza ou ícone genérico, você não tem favicon. Se aparece o logo inteiro espremido, tem o errado. Sua marca igual no Instagram, no site e na aba do navegador: https://avilaops.com/identidade-visual/ ou chame no WhatsApp: https://wa.me/5517997811471.
Perguntas frequentes
Favicon ajuda no Google? Ele pode aparecer ao lado do nome do site nos resultados, no celular e no computador. O Google pede ícone quadrado e recomenda mais de 48 por 48 pixels. Não muda a posição, mas muda se a pessoa reconhece e clica.
Posso usar uma foto como favicon? Em 16 pixels uma foto vira um borrão. Ícone precisa ser forma simples com uma ou duas cores.
Troquei o favicon e continua o antigo. Por quê? O navegador guarda o ícone antigo em memória (cache) por dias. Abra o site em janela anônima ou em outro aparelho para conferir.
