O que é um favicon?

Um favicon é a imagem pequena que identifica um site dentro do navegador. Ele aparece na aba aberta, ao lado do título da página, e também nos favoritos, no histórico e nas sugestões que o navegador mostra enquanto você digita um endereço. O termo vem do inglês favorite icon (ícone de favoritos), porque foi na lista de favoritos que ele começou a ser usado, em meados dos anos 1990, com os primeiros navegadores gráficos. Hoje o favicon é muito mais do que um enfeite: é o rosto com o qual um site se apresenta em um espaço onde dezenas de abas e opções disputam atenção. Embora meça apenas alguns pixels, o favicon transmite informação útil: indica, sem que seja preciso ler o título inteiro, que uma aba pertence a um determinado site. É a primeira impressão visual que muitas pessoas têm de uma marca no dia a dia e, por isso, até um sistema como o Kardex Tauro tem o seu, para que quem trabalha com seus estoques encontre de relance a aba certa entre muitas abertas.

Para que serve um favicon?

O favicon cumpre várias funções, todas relacionadas a identificar, diferenciar e transmitir confiança:

Identificar o site de relance. Com muitas abas abertas, o ícone permite encontrar a página certa sem ler cada título.
Reforçar a marca. Ele repete o logotipo ou suas cores em cada aba, no histórico e nos favoritos, o que aumenta o reconhecimento com o tempo.
Transmitir profissionalismo. Um site sem favicon parece incompleto ou descuidado diante de outro que tem.
Melhorar a experiência do usuário. Facilita se orientar e voltar a uma página, principalmente quando há muitas janelas ou abas abertas.
Diferenciar o site da concorrência. Ajuda uma página a se destacar de outras semelhantes salvas nos favoritos.
Personalizar atalhos. Os aplicativos instalados a partir do navegador e os atalhos da área de trabalho usam uma versão do favicon como ícone.

Em resumo, o favicon faz o mesmo trabalho que a placa na porta de uma loja, mas em miniatura: permite reconhecer, lembrar e distinguir.

Onde um favicon aparece?

O favicon aparece em vários lugares do navegador e do sistema operacional:

Na aba do navegador. É o lugar principal: o ícone aparece à esquerda do título da página.
Na barra de favoritos ou marcadores. Cada site salvo é identificado pelo seu ícone, o que permite encontrá-lo rápido entre dezenas de favoritos.
No histórico de navegação. O ícone ajuda a reconhecer, dias depois, as páginas que foram visitadas.
Nas sugestões de preenchimento automático. Ao digitar um endereço, o navegador mostra um ícone ao lado de cada sugestão.
Nos aplicativos instalados pela web. Quando um site é instalado como aplicativo, seu ícone é usado na área de trabalho ou no menu de aplicativos do aparelho.
Em leitores de notícias e agregadores. Muitas plataformas usam o favicon para representar a origem de cada artigo.

Cada um desses lugares é um ponto de contato com o usuário. Por isso, o favicon precisa ficar bem em qualquer tamanho e sobre qualquer cor de fundo.

Qual tamanho e formato um favicon deve ter?

Um favicon é desenhado para ficar bem em dimensões muito reduzidas, porque precisa ser legível em espaços de poucos pixels. Os tamanhos clássicos e seus usos típicos são:

Tamanho	Onde é usado
16 × 16 pixels	Aba do navegador; o favicon clássico
32 × 32 pixels	Abas em telas de alta densidade e atalhos
48 × 48 pixels	Favoritos, histórico e alguns sistemas operacionais
192 × 192 pixels	Ícone de aplicativos web instaláveis (PWA)

Sobre o formato, o tradicional é o ICO, um tipo de arquivo que pode guardar várias resoluções ao mesmo tempo e que os navegadores reconhecem desde os primeiros anos da web. Hoje também são muito usados o PNG, que aceita transparência e fica nítido em qualquer tela, e o SVG, que é vetorial e amplia sem perder qualidade. Uma prática recomendada é publicar pelo menos uma versão de 32 × 32 ou 64 × 64 pixels em PNG, ou um arquivo ICO com vários tamanhos dentro, para cobrir a maioria dos casos.

Como criar um favicon?

Criar um favicon não exige ser designer gráfico. Dá para partir do logotipo da marca ou de um símbolo simples e seguir estes passos:

Simplificar o desenho. Em 16 × 16 pixels não cabem detalhes finos; o ideal é uma única forma clara, com cores de alto contraste.
Testar em tamanho pequeno. O que fica bom grande pode ficar ilegível em miniatura; por isso o desenho deve ser conferido no tamanho real.
Usar ferramentas de design. Programas de design vetorial ou editores de imagem permitem exportar o ícone em vários tamanhos e formatos.
Recorrer a conversores online. Existem serviços gratuitos que transformam uma imagem PNG ou JPG em um arquivo ICO com várias resoluções incluídas.
Manter a coerência da marca. Vale usar as mesmas cores e formas do site para que o ícone seja associado à marca de imediato.
Nomear o arquivo corretamente. A convenção clássica é chamá-lo de favicon.ico, para que o navegador o encontre sem configuração adicional.

O resultado precisa ser reconhecido em meio segundo, porque é mais ou menos isso que um usuário leva para olhar uma aba.

Como colocar um favicon no seu site?

Existem duas formas principais de colocar um favicon em um site. A primeira é enviar o arquivo para a pasta raiz do site com o nome favicon.ico. Quando o navegador abre uma página, ele solicita automaticamente /favicon.ico e, se o arquivo existir, mostra sem precisar alterar o código. É o método mais simples e funciona em quase qualquer hospedagem. A segunda é vinculá-lo pelo HTML, o que dá controle total sobre o caminho e o formato. Para isso, adiciona-se uma linha dentro do cabeçalho da página, entre as tags de cabeçalho, parecida com esta: <link rel='icon' href='favicon.ico'> Se o arquivo estiver em outra pasta ou tiver outro nome, indica-se o caminho completo no atributo href. Para um arquivo PNG, a linha pode ficar assim: <link rel='icon' type='image/png' href='favicon.png'> Em sites feitos com sistemas de gerenciamento de conteúdo, como o WordPress, normalmente basta enviar o arquivo pelo painel administrativo; o sistema cuida de gerar a tag certa. Em um site estático, basta enviar o arquivo por FTP e, se quiser, acrescentar a linha de vínculo em cada página.

Erros comuns com favicons

Embora o conceito seja simples, é comum encontrar problemas na hora de implementar. Os mais frequentes são:

O ícone não aparece por causa do cache do navegador. É o erro número um: o navegador guarda o favicon antigo e continua mostrando mesmo depois que o arquivo mudou. A solução é limpar o cache, testar em uma janela anônima ou forçar a atualização da página.
Caminho ou nome incorretos. Se o arquivo não está na raiz ou o nome não corresponde ao do vínculo, o navegador não o encontra e mostra o ícone genérico.
Formato não suportado. Alguns navegadores antigos só aceitam ICO; se você usar apenas PNG ou SVG, o ícone pode não aparecer em todos os aparelhos.
Tamanho mal calculado. Uma imagem muito grande não reduz bem e acaba ficando borrada ou ilegível na aba.
Esperar que a mudança seja imediata. Além do cache local, algumas redes de distribuição de conteúdo demoram para propagar o novo ícone.
Confundir o favicon com o logotipo completo. O logotipo completo quase nunca funciona em 16 × 16 pixels; é necessária uma versão simplificada.

Para conferir se está tudo certo, basta abrir o site em uma janela anônima e olhar a aba: se o ícone aparecer nítido ao lado do título, o favicon está funcionando. No fim das contas, o favicon é um detalhe pequeno com um impacto grande na imagem de qualquer site. Ele identifica a página, reforça a marca e melhora a experiência de quem navega. E, como acontece com os bons detalhes, quando está bem feito passa despercebido: a aba, simplesmente, é reconhecida na hora.

Labels:

#favicon #ícone #web