Certamente, em mais de uma ocasião, você já ouviu falar de um favicon. Isso está intimamente relacionado ao web design, e é um ponto importante que esteja em todas as páginas, seja uma loja online, um blog, um site, etc. eles vão perguntar a você. Mas, O que é um favicon? Para que serve? E o mais importante de tudo, como isso é feito?
Se você tem muitas dúvidas sobre isso, aqui vamos te dar as chaves para que você entenda e, principalmente, para que possa apresentá-lo dentro do seu projeto e ficar com uma apresentação melhor. Nós asseguramos você!
O que é um favicon
Vamos começar explicando o que é um favicon para que você o entenda. E, para isso, nada melhor do que dar um exemplo prático. Imagine que você está navegando agora (na verdade, você está nos lendo). Mas você não tem apenas uma guia, mas várias delas. Você deve ter notado que, em cada um deles, aparece o nome do que aquela página reflete, seja YouTube (porque você está ouvindo música de fundo), Gmail (porque você está com o e-mail aberto) ou esta página.
Ao lado de cada nome, à esquerda, aparece uma pequena imagem, em forma de quadrado. O que está no YouTube e no Gmail certamente o identifica com os logotipos que possuem, mas e o resto das guias?
Bem, o que você vê é na verdade o favicon. Em outras palavras, é um ícone relacionado à página que você está visitando, Por isso é tão importante estar atento a este detalhe, pois ao adicionar uma página aos favoritos ou atalhos, o favicon passa a ser a "imagem" dessa página e por isso tem que cuidar do seu design para que está relacionado perfeitamente (e acima de tudo parece bom para distingui-lo dos outros).
Este pequeno ícone geralmente tem um tamanho definido que é 16 × 16 pixels (embora também possa ser definido como 32x32 px). Dentro dele você deve cuidar para que tudo que você colocar seja visto corretamente, caso contrário, aparecerá como um pequeno spot identificável (e que dará uma imagem muito ruim de sua página).
Por que o favicon é tão importante?
Agora que você sabe o que é o favicon e o localizou nas páginas que abre regularmente, percebeu que hoje há cada vez menos páginas faltando? Porque é realmente muito importante dar uma visão de elegância e know-how. Ou seja, você vai transmitir uma imagem de marca ou corporação que se preocupa com os detalhes.
No entanto, o favicon também tem outros usos, como:
- Sirva como identificação de sua página. Normalmente, este favicon está relacionado ao logotipo que você tem em seu site, apenas em um tamanho menor. Mas quando o logotipo é muito grande e não será visto no botão, você tende a escolher algo relacionado a ele.
- Você ajudará os usuários que salvaram sua página a identificá-la visualmente. Assim, mesmo que não se lembrem do url, ou do nome da empresa, devido à imagem do favicon, irão localizá-lo.
- Para ser "bom" com SEO. Isso deve ser feito com uma pinça. E é que ter ou não um favicon não afetará diretamente o SEO (ou seja, não o posicionará melhor ou pior por tê-lo ou não). Agora, é cada vez mais comum que, quando um navegador entra em uma página, procure aquele favicon e, quando não o encontra, dá um erro 404. E você sabe que esses erros não são bons para o SEO de uma página.
Como fazer um favicon
Depois de ver, fica claro que um favicon é um elemento essencial quando se tem uma página web. Agora, como você faz um?
Você deve saber que, na maioria dos casos, o que ele faz é escolha o logotipo desse site, ou se for muito grande, algo que o identifique. Por exemplo, imagine que você tem um site de televisão para o qual ligou de alguma forma. Mas isso, no favicon, é muito grande. Em vez disso, você pode colocar uma imagem de uma televisão para que eles a relacionem. Nestes casos, é recomendável usar as mesmas cores do seu site para que o identifiquem melhor.
E agora, como podemos criar um favicon? Bem, você tem várias opções:
Photoshop, Gimp ...
Em outras palavras, estamos falando de programas de edição de imagens, já que um favicon é criado exatamente da mesma forma que uma imagem. Claro, você tem que salvá-lo no formato .ico para que seja reconhecido como tal, pois não pode ser deixado como jpg, gif ou similar.
Esta maneira de fazer isso permite que você personalize o favicon muito melhor, conseguindo criá-lo do zero e dando o acabamento que você deseja. Normalmente para isso você trabalha com uma imagem em tamanho normal e depois se adapta ao tamanho desse botão.
Afinal, ele deve ser carregado e testado em diferentes navegadores para ver se parece bom, é representativo e, acima de tudo, é compreendido.
Usando ferramentas online
Neste caso, nos referimos a páginas da web que se encarregam de converter qualquer imagem desejada em um favicon em questão de segundos. Mas você também tem a opção de crie seu favicon diretamente com essas páginas.
Se você deseja o anterior (carregue a imagem e converta-o), recomendamos Favicon Generator ou Favic-o-matic. Mas se você quiser o último (desenhe do zero), aposte no editor favicon.io ou x-icon.
Com WordPress
A sua página é feita em WordPress? E você sabe que pode usar esse sistema para criar seu favicon. Para isso, você pode usar alguns plug-ins que permitem criar este botão com base em uma imagem que você carregou (ou que carregou). Também através de "Aparência / Personalizar" você pode fazer isso.
Depois de fazer o favicon, basta colocá-lo no seu site e fazer com que ele o reconheça para poder exibi-lo na área esquerda do nome da sua página, bem como ao salvá-lo nos favoritos. Desta forma, eles o reconhecerão facilmente, sem ter que parar para ler se é a página que realmente desejam visitar.