Favicon: o que é, como criar e como adicionar ao HTML do site?

Favicon: o que é, como criar e como adicionar ao HTML do site?


Você sabe o que é um Favicon?

Ainda que você não relacione o nome ao objeto, se você já acessou qualquer site na internet, com certeza já se deparou com um favicon.

No conteúdo de hoje, falaremos mais sobre o que é um favicon, onde encontrá-los, qual a sua importância e como gerar um para o seu site.

Vamos lá?

O que é favicon de um site?

Mistura de favorite + icon, ou “ícone favorito”, favicon é aquela representação visual pequenininha, que fica à esquerda do nome do seu site na aba do navegador em que ele está sendo acessado.

No caso da Kenzie Academy Brasil, nosso favicon é este pequeno conteúdo visual idêntico ao nosso logo.

Para que serve o favicon?

A princípio, o favicon de um site pode parecer somente um elemento estético de pouca importância. Mas a verdade é que sua utilização vai muito além disso.

Primeiramente, sendo o favicon um item requisitado pelo navegador ao carregar o site, se o seu site não possuir este arquivo, ele retornará um erro 404.

Em segundo lugar, o seu favicon é um importante item de identificação da sua marca e do seu site, portanto, é necessário que exista e esteja sempre atualizado.

Quais os principais aspectos de um favicon?

Um favicon deve seguir algumas regras para que funcione corretamente.

Antes de qualquer outra coisa, é preciso estar atento às dimensões deste arquivo. Os favicons devem ter dimensões de 16 x 16 pixels, ou 32 x 32 pixels e menos de 1KB, para navegador web em desktop.

Em dispositivos móveis, as dimensões mudam de acordo com os sistemas operacionais. Para os usuários de iOS no iPhone, os favicons devem ter 57 x 57 pixels. Já para quem utiliza o iOS em iPads, as dimensões são 152 x 152 pixels.

Essas dimensões também funcionam no Chrome do Android.

Qual a importância de usar um favicon?

Como dito algumas linhas acima, o favicon é um importante aspecto de identificação visual do seu negócio.

Imagine que, em um navegador repleto de diversas abas diferentes, o seu usuário sempre saberá qual é a sua por conta do seu favicon.

Os favicons também são exibidos na barra de favoritos e nos buscadores, como o Google.

Fonte: Open Source SEO

Além disso, por ser um item amplamente utilizado na internet, o seu site parecerá menos confiável e com menos credibilidade se não exibir um.

O seu favicon também pode ser um ponto de destaque entre você e a sua concorrência, uma vez que chamar a atenção do seu público visualmente pode fazer muita diferença, principalmente em um mecanismo de busca.

Como fazer um favicon?

Para criar um favicon, você precisa, antes de qualquer outra coisa, decidir qual imagem será exibida nele.

Geralmente, os favicons são reproduções reduzidas dos logos das empresas.

Se o próprio logo puder estar inteiro em um favicon sem que sua compreensão seja comprometida, tanto melhor.

Outra ideia bastante difundida é colocar no seu favicon a primeira letra da sua marca, caso o seu logo seja uma grafia do nome do seu negócio.

O favicon oficial do Google é um exemplo disso:

Após decidir o que será exibido no seu favicon, chegou a hora de efetivamente criá-lo!

4 geradores de favicons online

Se você não tem experiência com editores de imagens, fique tranquilo! Desenvolver seu favicon pode ser extremamente fácil com ajuda de geradores automáticos de favicons online.

Abaixo, listaremos os 4 mais populares para te ajudar.

Favicon Generator Tool

Com o Favicon Generator, você pode criar o seu favicon de duas maneiras.

Você pode enviá-lo pronto para para redimensionamento ou criá-lo do zero escolhendo uma imagem padrão na galeria de imagens da ferramenta.

Se você tem um site no ar mas ainda não tem um favicon definitivo, essa pode ser uma ótima opção para obter um favicon provisório.

Favicon.cc

Com o Favicon.cc você também pode utilizar os recursos ferramentais disponibilizados para criar um favicon do zero ou subir uma imagem pronta para redimensionamento.

Online Favicon Maker

A ferramenta Online Favicon Maker possui uma paleta mais expandida de cores e também permite a criação de um favicon do zero.

Sua usabilidade, apesar de ter um visual antigo, é bastante simples.

Iconfu

De todas as ferramentas citadas hoje, o Iconfu talvez seja a mais completa.

Com uma interface robusta, mas simples, ela conta com contas gratuitas e pagas e com uma infinidade de vetores que podem ser personalizados de acordo com todos os gostos.

É possível trocar suas cores e tamanhos, além, é claro, de redimensionar um icone já previamente desenvolvido por você.

Como colocar um favicon HTML?

Para inserir um favicon no seu site, basta acessar o seu FTP e incluí-lo no diretório raiz. Deste modo, todos os navegadores, desktop ou mobile, que suportarem este arquivo o encontrarão ali.

Mas também existe uma maneira secundária de incluí-lo no seu site: através do seu código HTML.

Para isso, basta acessar o seu código fonte, ir até a seção <head> de HTML e incluir a seguinte linha, alterando o caminho do diretório.

<link rel=”shortcut icon” href=”insira_aqui_o_caminho” type=”image/x-icon” />

Prontinho, seu favicon estará disponível!

Conclusão

Na hora de colocar um site no ar, lembre-se de estar atento a todos os pontos de conexão entre as suas páginas e o seu usuário.

Todos os aspectos visuais são importantes, portanto, não negligencie nenhum!

Gostou do conteúdo e quer entrar na programação? A Kenzie está com o processo seletivo aberto para você se tornar desenvolvedor(a) full stack em apenas 1 ano. Serão 12 meses de muito aprendizado, com suporte integral de nossa equipe e muito mais.

Clique aqui e inscreva-se agora!

0

Escreva o primeiro comentário

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *