Provavelmente você já deve ter reparado naqueles pequenos ícones que aparecem nas abas dos navegadores quando abrimos uma janela no navegador. Trata-se do favicon, um recurso que tem muito mais importância do que apenas embelezar a página, pois também é utilizado na estratégia de branding, ou seja, ele contribui para o reconhecimento da marca na internet.
Entretanto, existem alguns detalhes sobre esse recurso que é preciso observar para que ele funcione corretamente em um site, como quais os formatos e os tamanhos são os mais indicados ao criar o arquivo. Para que você saiba como adicionar esse elemento ao site, elaboramos este post que contém os seguintes tópicos:
Boa leitura!
O que é favicon?
A palavra favicon representa a junção de “favorito” e “ícone”. Trata-se de uma pequena imagem exibida no navegador, geralmente com o tamanho de 16 x 16 ou 32 x 32 pixels, utilizada para identificar um determinado site. Seu principal objetivo é facilitar a localização da página pela pessoa usuária entre as abas abertas do navegador.
Mas não é só isso, o favicon também aparece em outros locais em que seja feita alguma referência ao site, como no histórico de páginas visitadas do navegador, na barra de favoritos, se a página for adicionada a ele, além de aparecer ao lado do nome do site na barra de endereços da ferramenta.
Qual a importância de usar um favicon?
Em função da ampla visibilidade do favicon no navegador, esse é um recurso importante para aumentar o reconhecimento do site perante as pessoas usuárias. Isso porque ele facilita a identificação da marca e proporciona maior credibilidade a ela, pois essa é uma forma de destaque em meio a tantos outros sites.
As pessoas que visitam a página percebem esse elemento e passam a associá-lo ao site. Outro fator importante sobre o favicon é em relação a estratégia de SEO — Search Engine Optimization. Embora ele não represente um impacto direto nos resultados de buscas, existem extensões que podem ser adicionadas aos navegadores e que permitem a sua exibição nos resultados das pesquisas efetuadas.
Assim, se a imagem estiver configurada na aplicação web, será exibida e reconhecida pelas pessoas que realizam as pesquisas. Portanto, isso reforça a ideia de que esse é um recurso essencial para aumentar o reconhecimento do site na internet.
Como criar um favicon no seu site?
Adicionar um favicon ao site não é uma tarefa complicada. Entretanto, requer alguns cuidados para que o resultado seja satisfatório e atinja o objetivo, que é fazer com que a pessoa usuária do site se lembre da página. Confira, a seguir, como realizar essa atividade.
Produza a imagem
A produção da imagem pode ser feita em qualquer editor de imagem, como o Photoshop ou outro similar. É importante que ela tenha o formato quadrado para que não sofra nenhuma distorção ao ser redimensionada para o tamanho utilizado pelos navegadores, que normalmente é de 16 x 16 pixels.
Existem outros tamanhos que também são aceitos pelos navegadores, entre eles o de 48 x 48, 64 × 64 ou 128 × 128 pixels. Não é preciso criar uma imagem tão pequena assim, mas é importante criá-la em uma dimensão proporcional.
A imagem utilizada pode ser o logo da empresa ou uma alternativa semelhante. Lembre-se que ela será exibida em tamanho reduzido. Por isso, evite textos compridos ou uma imagem com muitos detalhes, pois o resultado pode não ficar tão legível quando ela for reduzida.
Gere o favicon
O próximo passo é transformar a imagem gerada em um favicon. O objetivo é gerar um arquivo com o formato .ico, que é o tipo mais utilizado nos navegadores. As versões mais modernas também aceitam outros formatos para o favicon, entre eles o PNG e GIF, especialmente em função da variedade na resolução dos monitores e do tamanho das telas dos dispositivos móveis.
Entretanto, alguns navegadores mais antigos não reconhecem esses formatos. Por isso, o modelo .ico ainda é bastante utilizado. Existem diferentes formas de gerar o arquivo. Uma delas é por meio de ferramentas gratuitas disponíveis na internet, como a Real Favicon Generator, Favicon.ico & App Icon Generator, Favicon.cc e muitas outras.
Nelas, há a opção de fazer o upload da imagem criada, acessar o arquivo de outro site por meio de uma URL ou, ainda, criar o arquivo com os recursos online. Depois, basta fazer o download dos arquivos e copiar o código HTML gerado para adicioná-lo ao código fonte da página. Falaremos sobre isso no próximo tópico.
Como mencionamos, alguns sites que geram favicons fazem a conversão da imagem para diferentes formatos e tamanhos, além de disponibilizarem o código HTML que deverá ser inserido na página. Esse código é necessário para que o navegador entenda qual arquivo deverá ser exibido como favicon de acordo com o dispositivo utilizado para acessar o site.
Adicione a imagem ao site
O próximo passo é adicionar a imagem ao site. Para isso, basta enviar o arquivo favicon.ico para o servidor em que o site está hospedado por meio de ferramentas de FTP, como o Filezilla ou outra semelhante.
Depois, é só adicionar o favicon ao código HTML. Isso é feito por meio da adição de uma tag HTML de link no elemento head da página. Confira o exemplo a seguir.
<link rel=”shortcut icon” href=”/imagens/favicon.ico” type=”image/x-icon”>Muitas vezes o favicon é gerado com transparência no fundo da imagem. Entretanto, nem todas as plataformas entendem essa característica, como o iOS, o que faz com que a imagem exibida não seja a ideal. Outro problema que pode acontecer ao utilizar apenas um arquivo é que ele será redimensionado para os diferentes dispositivos, o que pode ocasionar a perda da resolução da imagem.
A alternativa que mencionamos sobre os vários arquivos gerados pelas ferramentas disponíveis online resolvem esses problemas. Ao utilizar essa opção, é preciso adicionar os links de referência para cada um deles e também para o arquivo de código gerado.
O favicon é um recurso importante para reforçar a imagem do site na internet, pois ele contribui para a divulgação da identidade visual da marca ao permitir a fácil identificação da aplicação em diferentes locais do navegador. Ele é um elemento simples e fácil de ser adicionado, além de existirem diversas ferramentas que auxiliam essa tarefa de forma gratuita.
Gostou do nosso conteúdo sobre o que é favicon? Então, confira este post sobre o que é e qual a importância do personal branding!
