Avila Ops

O que é favicon, o ícone da aba do navegador

Publicado em · Em Presença

Cartaz editorial com o título “O que é favicon, o ícone da aba do navegador” e formas azul, vermelha e amarela da Avila Ops.

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: Logo em fundo escuro e ícone 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 O que é identidade visual e o que entra nela.

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: avilaops.com/identidade-visual ou chame no WhatsApp: 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.