O que é favicon?

favicon são pequenos ícones que funcionam como marcadores visuais. Eles ocupam alguns pixels na tela, mas são importantes para sua marca. 

O favicon serve para as pessoas reconhecerem o site, seja na aba do browser, na lista de favoritos ou no resultado das buscas. Eles são pequenos, mas causam uma grande impressão.

Abordaremos os conceitos básicos do favicon: onde eles aparecem, por que são importantes, a relação deles com a SEO e o que considerar ao criar um favicon.

O que é favicon? Onde ele é usado? 

Sempre que você abre uma aba do browser aberta ou navega nos favoritos, aparece um pequeno ícone ao lado do título da página — é o favicon. Favicon é um pequeno ícone que identifica e diferencia um site dos demais.

O favicon pode ser um logotipo, as iniciais, o símbolo ou qualquer gráfico que capture a identidade da marca. É essa imagenzinha que faz as pessoas reconhecerem sua marca quando a veem. 

O favicon é mais do que uma simples decoração; quando várias abas ficam abertas na barra do browser, o favicon diferenciar uma marca da outra. Com o favicon, fica mais fácil encontrar o que queremos. 

O termo favicon apareceu pela primeira vez em 1999, sendo a forma abreviada de “ícone favorito”. Esse é o termo mais comum, mas também pode ser chamado de ícone de site, ícone de aba, ícone de atalho ou até ícone de app. Todos se referem à mesma coisa: uma imagenzinha que representa o site. 

Onde o favicon aparece on-line

Os favicons são extremamente úteis porque facilitam o reconhecimento do site na internet. Você encontrará o favicon nestes e em outros locais:

• Aba do browser

• Favoritos

• Barra de endereço

• Resultados dos buscadores

• Atalho da área de trabalho

• Histórico do browser

• Barra de buscas

• Resultado das buscas nos aparelhos móveis

Crie um favicon com o Logo Maker gratuito

Por que o favicon é importante?

A primeira impressão é tudo, e o favicon não é exceção. Esse detalhar que pode fazer uma grande diferença em como sua marca é percebida. O favicon pode ser um dos primeiros elementos visuais da marca que as pessoas veem no seu site, além de manter o awareness da marca. 

Sem ele, parece que falta algo; esse elemento visual costura o design do seu site. Todas as grandes marcas incluem um favicon no site. Quando ele não aparece, os usuários podem achar que a marca não é tão confiável ou profissional.

 Há quatro motivos principais para incluir o favicon no design do seu site site: identidade visual, profissionalismo, experiência dos usuários e experiência nos aparelhos móveis.

1. Identidade visual

O favicon é uma extensão da identidade da marca. Por geralmente ser o logotipo, as iniciais ou um símbolo associado a você e ao que faz, o favicon também serve como uma representação visual do seu site e do conteúdo dele. 

Ao verem seu favicon, os usuários devem associá-lo instantaneamente à sua marca. Isso traz reconhecimento à marca e reforça a identidade dela, pois a padroniza em todas as plataformas e aparelhos.

2. Profissionalismo

Se você não achar o favicon, isso pode gerar um alerta no seu subconsciente. Qual é o nível de profissionalismo do site? Ele é confiável?

O favicon deixa o site mais sofisticado e mais confiável, aumentando as chances de os visitantes clicarem, comprarem ou interagirem no site.

3. Experiência dos usuários

As abas e os favoritos do browser podem nos sobrecarregar rapidamente. O favicon facilita a identificação do seu site pelos usuários, principalmente com várias abas abertas. O favicon também melhora a experiência geral dos usuários e deixe o seu site mais acessível. Com um elemento visual padronizado em todas as plataformas, ficar fácil identificar seu site e incentiva o retorno dos visitantes. Como resultado, o favicon também aumenta a confiança em todos os aparelhos, as buscas e o reconhecimento da marca no seu site. 

4. Experiência móvel

O favicon é importante na experiência móvel, pois facilita a localização e o acesso dos usuários ao seu site nos smartphones e tablets. Ao adicionar um favicon ao seu site, você melhora a experiência móvel para seu público, aumentando as chances de eles visitarem e ficarem no site.

Qual o impacto do favicon na SEO

O favicon é importante na SEO. Mesmo não influenciando diretamente os rankings das buscas, ele pode trazer benefícios indiretos. Ao deixar o site facilmente identificável e acessível, o favicon incentiva os visitantes a explorarem, voltarem e, por fim, ficarem por mais tempo. Essa interação aprimorada dos usuários contribui para uma presença on-line mais forte e uma otimização nas buscas.

Quando os usuários veem seu favicon de forma padronizada em diferentes plataformas, isso reforça sua marca e a deixa mais marcante. Isso contribui para uma melhor experiência dos usuários, o que leva a:

• Menor taxa de rejeições

• Mais envolvimentos

• Reconhecimento aprimorado

• Mais visitantes recorrentes

• Taxa de cliques mais alta

• Experiência móvel aprimorada

Esses sinais positivos dos usuários mostram aos buscadores que o seu site é valioso e fácil de usar — fatores que podem melhorar sua visibilidade e sua classificação.

Como fazer um favicon

Agora que você sabe o que é favicon e como ele ajuda o seu site, vamos ver como adicionar um ao site.

Há duas formas principais de criar um favicon:

1. Crie o seu. Com um domínio suficiente no design gráfico ou com a ferramenta certa, você pode criar um favicon que se alinhe à identidade visual do seu site, tenha um bom visual e seja reconhecível.

2. Contrate um designer. Um designer gráfico especializado em design de logotipos ou de ícones pode criar um favicon que combine com sua marca.

 Em ambos os casos, é bom ter uma ideia do que sua marca representa antes decidir qual deve ser o visual do seu favicon. Recomendamos preparar antes as cores da marca, além da forma ou dos objetos relacionados ao que você faz, ou mesmo um logotipo. 

Saiba como adicionar um favicon a um site Squarespace

Algumas considerações sobre o design

Ao criar o design ou contratar alguém para isso, siga as seguintes recomendações.

• Simplicidade: você não tem muito espaço para trabalhar; faça um ícone com design simples. O excesso de detalhes pode não aparecer ou pode prejudicar o visual geral.

• Padronização da marca: faça o favicon com o padrão da sua marca — use as cores dela, inclua elementos do logotipo ou crie uma versão simplificada do logotipo da sua empresa.

• Originalidade: um favicon exclusivo se destaca da concorrência. Evite um design muito parecido com o de outra marca ou colega.

Crie um favicon fácil de reconhecer e que seja fácil de identificar em tamanhos pequenos.

Tamanho e formatação do favicon

O favicon tem vários tamanhos e formatos padrão. Diferentes telas precisam de favicons de diferentes tamanhos, e você precisará considerar como formatar as imagens para cada uma delas.

 Confira alguns tamanhos básicos (em pixels) e onde eles podem ser aplicados:

• 16 x 16: aba do browser ou lista de favoritos

• 32 x 32: atalho na barra de tarefas

• 96 x 96: atalho da área de trabalho

Teste o favicon em tamanhos diferentes para garantir que ele ficará bem em qualquer lugar.

Formatos de arquivo para o favicon: ICO e PNG

Um tipo comum de arquivo de favicon é o ICO, pois traz várias vantagens. Sendo o formato original e o mais usado, é um tipo universal e bastante aceito. É possível incluir várias imagens pequenas no mesmo arquivo, facilitando o ajuste do tamanho e a otimização dos ícones pequenos.

O PNG também é uma ótima opção, sendo tão eficaz quanto o ICO e muito fácil de usar. Escolha um com o qual você se sinta mais confortável ou o que sua plataforma recomenda.

Dicas ao carregar o favicon

Antes de finalizar o design do favicon, confira estas dicas essenciais para que ele fique com o melhor visual em todas as plataformas.

• Mantenha a simplicidade. Evite detalhes intrincados, que não vão aparecer e podem tirar a atenção do design básico.

• Teste. Examine o favicon em tamanho real e em todos os tamanhos diferentes, para ver que ele é legível.

• Use fundo transparente. Assim, o favicon aparecerá bem em browsers de diferentes fundos e cores. 

• Considere os diferentes contextos. Qual ficará o favicon nos variados aparelhos e browsers?

• Faça upload de duas versões. Nas plataformas de criação de sites como o Squarespace, é possível carregar um favicon para telas no modo claro e escuro.

Se você decidir trabalhar com um designer, não deixe de repassar essas dicas para ele criar um favicon que represente bem a sua marca.