Favicon: o que é, como criar e por que é imprescindível que seu site tenha um

Antes de te explicar exatamente o que é o favicon e como criar o seu, uma perguntinha rápida…

– Nesse emaranhado de abas abaixo, você consegue identificar em qual está aberto o YouTube?

(São muitas guias, eu sei…)

Mas se você respondeu que a quarta guia da esquerda para a direita é a do YouTube, acertou!

E vamos combinar que você provavelmente não precisou de mais que alguns segundos para identificar.

Também não teve nenhum trabalho mega investigativo por trás.

Você se orientou pelo ícone da aba.

Esse ícone é justamente um dos usos do favicon.

E nas próximas linhas eu vou te explicar exatamente o que é esse tipo de imagem, por que é imprescindível que seu site tenha um e como criar o seu.

O que é um favicon?

O favicon (junção das palavras favorite icon) é um ícone pequeno, geralmente de 16×16 pixels, exibido nos navegadores para facilitar a identificação de um site.

É comum ele aparecer junto ao título da aba, nos favoritos, e também na tela de nova guia para usuários do Chrome.

Esse tipo de ícone surgiu em 1999, quando a Microsoft lançou o Internet Explorer 5, que tinha suporte para favicons e os exibia quando uma página era adicionada aos favoritos.

Mas por que os favicons são importantes para o seu site?

Veja bem, por ser posicionado em locais estratégicos, o favicon facilita a identificação do seu site melhorando a experiência do usuário (que não precisa sair clicando de aba por aba até encontrar sua página) e fortalece a sua marca.

Além disso, quando o seu site não possui um favicon, o navegador coloca um ícone genérico no lugar, o que pode passar como uma falta de profissionalismo, além de dificultar a identificação do conteúdo.

Pode parecer um detalhe pequeno, mas a falta dele gera um impacto considerável na experiência do usuário e no fortalecimento da sua marca.

Por isso, esse é o tipo de coisa que você não deve negligenciar.

Como fazer um favicon para seu site

Você pode fazer de duas formas: utilizando um editor de imagem ou um gerador de favicon.

Na primeira opção, você ou o seu designer (caso tenha um) cria o ícone usando um editor de imagem como o Photoshop, por exemplo, e faz todas as adequações necessárias de tamanho e formato.

Já na segunda, você pode escolher uma dentre as diversas opções de gerador de favicon que a internet oferece, subir o seu arquivo, fazer pequenas alterações e os geradores já exportam nos formatos que você irá precisar.

Independentemente de como você opte por criar os seus favicons, tem 3 coisas que você precisa levar em consideração:

  1. Tamanho: geralmente os favicons são exibidos em 16×16 pixels. Mas o Google, por exemplo, recomenda tamanhos múltiplos de 48 pixels, como 48×48 ou 96×96. Uma vantagem de usar os geradores é que eles exportam o ícone final em diversos tamanhos de acordo com as indicações de navegadores e sistemas operacionais mobile.
  2. Formato do arquivo: existem 7 formatos de arquivos válidos para favicons, porém os mais recomendados são .ico e .png por serem suportados em todos os navegadores mais utilizados.
  3. Transparência: caso opte por um ícone com fundo transparente, é importante salvar o arquivo nos formatos .ico ou .png e testar a legibilidade da imagem em fundos branco, cinza e preto.

5 dicas de como fazer um favicon marcante

Criar uma identidade visual da sua marca na cabeça do seu público usando um ícone de apenas 16×16 pixels pode ser um desafio e tanto, já que não é possível adicionar diversas informações.

Por isso, eu trouxe 5 dicas para te ajudar a criar um favicon que seja marcante e que tenha uma associação forte com o seu negócio para ser facilmente identificável.

1. Aposte na simplicidade

Observe esses 5 ícones de marcas famosas.

O que eles têm em comum?

Todos são extremamente simples e contém apenas um elemento. 

E isso não é coincidência.

Por se tratar de um espaço muito pequeno, mais elementos e informações significam confusão na cabeça do usuário.

A aposta na simplicidade favorece a legibilidade do ícone e consequentemente a identificação da marca.

2. Seja consistente com a sua marca

As cores, fontes ou elementos gráficos do favicon devem estar alinhados com o que é utilizado na sua marca e site em geral.

Por exemplo, o favicon da Wikipédia usa a mesma tipografia e cores da logomarca.

O favicon do Google Docs contém as mesmas cores e elementos parecidos com o ícone que é utilizado para identificar esse produto dentro da plataforma do Google.

3. Evite textos

Se você optar por utilizar elementos textuais no seu favicon, use uma ou duas letras no máximo. 

Mais do que isso prejudica completamente a legibilidade.

Olha esse exemplo:

Você consegue me dizer o que está escrito dentro do círculo vermelho?

Se você respondeu Coca-Cola, provavelmente é porque identificou a marca pelo conjunto dos elementos e não porque o texto está legível em um ícone de 16×16 pixels.

4. Aproveite a sua logo

Não necessariamente o seu favicon precisa ser a sua logo. 

Principalmente se ela for um texto grande ou tiver um desenho complexo, cheio de detalhes e texturas, não funcionaria muito bem como um ícone.

Porém você pode aproveitar os itens mais marcantes como as cores, o elemento principalmente ou a fonte utilizada para criar o seu ícone.

Por exemplo, o Google que, ao invés de usar o termo inteiro (que não teria legibilidade), optou por utilizar apenas G e uma combinação de suas cores principais para formar seu favicon. 

5. Teste as cores em diferentes fundos

O seu favicon será exibido em diferentes navegadores, guias comuns, abas anônimas…

Por isso, um último ponto importante antes de colocar seu ícone na internet é testar como ele fica em diferentes fundos, especialmente branco, cinza e preto.

Pois as cores de background do navegador do usuário (algo que está fora do seu controle) podem interferir na legibilidade do seu favicon.

Olha só a diferença que o fundo faz:

Como adicionar seu favicon a sua página no Klickpages

Se você assina o Klickpages, adicionar um favicon na sua página é muito simples.

Veja como neste vídeo:

[colocar vídeo embedado]

Agora, se você ainda não conhece, o Klickpages é um criador de páginas simples e intuitivo de usar.

Com ele, basta você selecionar um modelo pronto e testado no mercado (você também pode começar do zero), personalizar as cores, textos e imagens para deixar a cara do seu negócio e clicar em publicar para disponibilizar sua página na internet.

Quer saber mais sobre o Klickpages? Clique aqui!

Chegou a hora de criar seu favicon

Agora que você já sabe que é importante ter um favicon no seu site, chegou a hora de colocar a mão na massa e criar o seu.

Não se esqueça de colocar em prática as dicas que eu dei neste artigo: aposte na simplicidade, seja consistente com sua marca, evite textos, aproveite sua logo e, principalmente, teste o seu favicon em diferentes fundos.

Gostou desse artigo? Me conta aqui nos comentários, eu vou gostar muito de receber seu feedback!E não se esqueça de assinar a newsletter do Klickpages para receber mais conteúdos como esse semanalmente na sua caixa de entrada. É só clicar aqui.

Sobre o Autor

Meu nome é Angela, mas algumas pessoas me chamam de Angel. Faço parte do time de conteúdo do Klickpages e sou apaixonada por tecnologia e marketing. Sou especialista em SEO, tráfego orgânico e informações aleatórias (você sabia que o Alaska está mais perto da Rússia do que Brasília de Goiânia? Pois é...), fã de country americano e louca em esportes. Acompanho de tudo, mas meus favoritos são Fórmula 1 e futebol, inclusive assisto a jogos mesmo quando o meu time (Palmeiras <3) não está em campo. Ah, eu acredito que música de natal deveria tocar o ano inteiro e Christmas Peaceful Piano está entre as 3 playlists mais tocadas no meu Spotify.