Favicon: o que é, a importância e como configurar no website

De certeza que já reparaste que quando entras em determinados websites, no separador, do lado esquerdo aparece uma imagem. Esta pequena imagem no website tem o nome de Favicon que é uma abreviação para “ícone favorito”. Na maioria das vezes corresponde logótipo da marca ou algo relacionado com a mesma. Estas imagens não estão ali por acaso e tem um papel importantíssimo naquilo que é a estratégia de branding da marca.

Favicon: a importância de possuir um

Ter um favicon é mais uma oportunidade que tens de solidificar e dar a conhecer a tua marca e das pessoas associar na sua mente uma imagem a todo o conceito e posicionamento. Desse modo vejamos que vantagens de possuir um favicon no teu website:

• O favicon faz com que seja fácil atribuir uma imagem à marca;
• Ajuda o utilizador a organizar a sua navegação, visto que não tem de abrir o separador para perceber a que marca se refere o mesmo;
• Sempre que o utilizador fixar um separador, irá ter constante contacto com a imagem mesmo que não esteja a visitar o seu website.

Como configurar

O favicon é uma imagem de 16 x 16 pixeis o que implica alguns cuidados antes de ser aplicados. Assim sendo, vejamos o que é necessário para configurar um favicon.

Produção de imagem

O ideal se já tens o logótipo será colocar o fundo transparente e utilizar o tamanho de 16 x 16 utilizando uma ferramenta como o Photoshop. Visto que o Photoshop é um software pago, podes sempre utilizar uma ferramenta muito idêntica e grátis. Para isso acede a “photopea.com” Contudo, caso não consigas adaptar o logótipo na totalidade tenta selecionar uma parte que seja facilmente associável ao logo original, normalmente as iniciais são uma boa solução.

Em resumo, um Favicon deverá ser:

• Uma imagem transparente (PNG)
• Uma imagem com 16×16 pixels
• O teu logótipo ou a inicial do teu website (em formato imagem)

Adicionar ao website

Para adicionar o favicon ao teu website é preciso abrir o painel de controlo e procurar a pasta do tema para adicionar o ficheiro. Em seguida, ir ao HTML e adicionar o código correspondente ao favicon dentro da tag de head. Por exemplo:

<link rel=”shortcut icon” href=”http://www.nomedosite.com/imagens/favicon.ico” type=”image/x-icon”>

Caso tenhas escolhido fazer o favicon para diferentes plataformas, é necessário relembrar que deves adicionar os códigos de cada um deles para que o site consiga validar esta informação ao ser aberto nesses dispositivos.

Se o teu site é construido em WordPress, por exemplo, o processo torna-se muito mais simples e basta procurar pelo separador “apresentação”, selecionar “personalizar” e irás encontrar ou a opção de “site identity” (identidade do site) onde irás encontrar a opção de adicionar um favicon. Ou então no separador “cabeçalho”  selecionar opção de “alterar logotipo” e irás encontrar o local para inserires o teu favicon. De referir que estas definições podem variar mediante os temas.

Sendo assim quando estás a fazer o teu website lembra-te que é fundamental inserires o favicon. Contudo, se quiseres saber sobre a criação de websites e da gestão dos mesmos contacta-nos, somos especialistas na criação de websites.