Favicon: O que é, Como usar e Por quê é importante para o site

Na hora de criar um site e publicá-lo para o mundo, muitas pessoas se esquecem do toque final que pode fazer toda a diferença: o favicon. Esse pequeno detalhe do seu site deixa uma impressão que é muito maior que o seu próprio tamanho. Seu poder e importância não devem ser subestimados. A seguir, explicamos tudo o que você precisa saber sobre favicon e como criá-lo:

O que é favicon

Favicon é um pequeno ícone de 16x16 pixels usado nos navegadores para representar um site ou página. Favicon significa “favorite icon” (ou ícone favorito, como diria Paulo Coelho), e é comumente mostrado nas abas do navegador, mas também pode ser encontrado na barra de favoritos, no histórico e em diversos outros locais. Em alguns casos, como no Google Chrome, eles até se encontram na página inicial do navegador. Em outras palavras, o favicon funciona como o ícone do seu site, ou uma marca visual que serve para identificá-lo por toda a internet.

Por que o favicon é importante

Apesar do seu tamanho reduzido, o favicon é um recurso de grande importância para qualquer site, melhorando a experiência do usuário, o branding e o profissionalismo:

Experiência do usuário: O favicon funciona como uma indicação visual do seu site, melhorando a experiência de usuário do site. Ele ajuda o público a localizar a aba do seu site no seu navegador e em diferentes aplicativos, como a barra de favoritos, facilitando a volta ao site inúmeras vezes.

Branding: Para manter a consistência da marca, é importante não negligenciar nem o menor dos detalhes. Seja para um site de serviços ou uma loja virtual, o favicon contribui para o branding e para a visibilidade do seu site, estendendo seu estilo e linguagem para fora do site e entrando no navegador.

Profissionalismo: O favicon dá um toque a mais na legitimidade e no profissionalismo do seu site. Uma vez que a sensação de credibilidade é um diferencial na hora em que o cliente está decidindo onde fazer sua compra, o favicon pode fazer a diferença e aumentar suas vendas.

Como criar um favicon

Criar um favicon é um trabalho geralmente feito por um designer profissional e deve fazer parte de qualquer checklist para um novo site. Se você já trabalha com um designer, então inclua também o favicon no seu acordo com ele. Você também pode criar você mesmo um favicon usando um software de design ou diversas ferramentas online. O Criador de Logo do Wix é uma dessas ferramentas recomendadas para criar um favicon personalizado e profissional, que melhor reflita o seu estilo e suas necessidades.

Tamanho: O tamanho ideal para criar um favicon é 16x16 pixels, que é o tamanho em geralmente são apresentados. Entretanto, há lugares onde podem aparecer em tamanhos maiores (como 32x32 pixels).

Arquivo: O formato de arquivo preferido para o favicon é o JPEG ou PNG.

Transparência: No caso do seu design ter um fundo transparente, certifique-se de salvar seu arquivo como PNG e com a configuração para transparência ativada.

Dicas de design para criar o favicon

Criar um design para algo tão pequeno pode parecer moleza. No entanto, o fato dos ícones do site serem tão pequenos significa que você precisa ser extremamente preciso, uma vez que não há espaço para erros. A seguir, trazemos algumas dicas de como criar um favicon que se adeque da melhor forma possível à sua marca e ao seu site.

Simplicidade: O tamanho reduzido do favicon requer um design muito preciso. Evite adicionar muitos detalhes, como pequenas linhas, texturas ou sombreado. Ao invés disso, opte por um ícone simples, claro e em negrito, que seja instantaneamente reconhecido.

O site Wix do artista e ilustrador Adam J. Kurtz é um ótimo exemplo de design simples de favicon, com sua bem distinta estrela amarela. Um outro exemplo é o favicon composto de três pontos simples, da designer de joias e usuária Wix Ilaria Bonardi.

Identidade da marca: Um favicon deve incorporar o espírito do seu site e da sua marca, mantendo a mesma linguagem visual e esquema de cor do restante do seu site.

Para o site Wix da marca de moda Sorry, o favicon em formato de X é a continuação da mesma linguagem visual arrojada em preto e branco, refletida em suas roupas e logo. Da mesma forma, o favicon do eBay mistura as cores da marca com uma pequena sacola de compras, captando perfeitamente o espírito do site.

Pouco ou nenhum texto: Se você quiser incluir texto no seu favicon, como o nome da sua marca, por exemplo, limite-se de um a três caracteres. Inicias ou abreviaturas frequentemente são boas soluções para encurtar o texto.

O site Wix da ONG Arte usa a inicial A do seu logo como favicon, adicionando um fundo em verde fosforescente para atrair a atenção. Já o favicon do site Wix da empresa americana Red Fern não tem nenhum texto. Em seu lugar, há seu logo: uma folha de samambaia vermelha, que representa seu nome em inglês, garantindo que os clientes façam uma rápida associação entre o nome e sua representação visual.

Uso do logo: Apesar de alguns logos ficarem excelentes mesmo no tamanho do favicon, a maioria fica irreconhecível quando diminuímos seu tamanho. Se quer usar seu logo como favicon, alguns pequenos ajustes provavelmente serão necessários. Omitir o slogan ou usar apenas uma inicial são algumas das formas para fazer os logos funcionarem em pequenos tamanhos.

Repare como o favicon do Google é ligeiramente diferente do seu logo, ao mesmo tempo em que incorpora os mesmos valores de design. O favicon incorpora perfeitamente todas as quatro cores da marca dentro do G ao qual você já está acostumado a associar com o Google. Uma abordagem diferente foi tomada por Charlotte Mei, ilustradora e usuária Wix, que transformou suas letras iniciais em favicon.

Cor: Tenha em mente que o favicon vai ser mostrado em fundos de cores diferente, dependendo do contexto e do navegador usado. Portanto, certifique-se de testar seu favicon em fundos cinza, branco e preto antes de finalizar o design.

Como adicionar um favicon a um site Wix

Os sites Wix incluem automaticamente um favicon padrão, mas você pode personalizá-lo fazendo upgrade para um Plano Premium e conectando seu site a um domínio.

Para alterar o favicon em um site Wix:

1. No Painel de Controle do seu site, vá a Configurações.

2. Clique em "Gerenciar" ao lado de "Favicon".

3. Clique em "Fazer Upload do Favicon".

4. Selecione uma imagem ou clique em "Upload de Imagens" para fazer upload de uma imagem de seu computador.

5. Clique em "Aplicar" e pronto! Seu site agora possui favicon. Ele aparecerá na aba do navegador assim que você clicar em "Publicar".

Pronto para criar seu próprio site? Comece agora mesmo!

Por Equipe Wix