O que é favicon, importância, cuidados e como criar?

Somente quando se tem que criar e administrar um site, que as pessoas se dão conta da quantidade de “detalhes” que precisam de alguma atenção. Em meio a longa lista de questões envolvidas, um item às vezes é esquecido, mas que é de especial relevância – o favicon.

Se você está dando os primeiros passos nessa área de criar e administrar o seu site, é provável que tenha algumas perguntas a respeito do assunto e por isso, nosso foco com esse post, é responder a todas, ou pelo menos as mais frequentes e importantes.

O que é favicon?

Favicon é uma palavra que surgiu da junção de duas palavras em inglês – favorite + icon – e que significam favorito e ícone.

Trata-se de um arquivo de imagem com algumas características especiais:

• Quadrado – tem as mesmas medidas para altura e largura da imagem e é determinada em pixels;

• Medidas – dependendo do uso, o tamanho pode variar, sendo que os menores e mais comumente utilizados, têm 16X16 pixels e seus múltiplos (32x32, 48X48, …);

• Transparência – permite o uso de transparência para visualização sobre diferentes fundos;

• Formatos – há um formato padrão e próprio (.ico), porém atualmente vários navegadores aceitam outros formatos para exibição, como .gif, .png, .svg, .bmp e .jpg, sendo que os três últimos são menos comuns.

• Tamanho – é um arquivo de tamanho reduzido em termos do espaço que ocupa para armazenamento, tanto porque as medidas costumam ser reduzidas, como porque é adequado que seu carregamento seja rápido;

• Ícone – tem aparência de muitos dos ícones que há muito já eram usados para associar, por exemplo, os programas do sistema operacional e, portanto, explica em parte o porquê do seu nome, mas que a seguir você compreenderá melhor.

Seu uso vem sendo ampliado ao longo dos anos, mas inicialmente ele aparecia apenas na barra superior do navegador, ao lado do nome do site ou ao lado da barra de endereço. A posição poderia variar de acordo com o browser e até mesmo sua versão. Logo a maioria deles também passou a exibir o favicon ao lado do nome do site na lista de favoritos, o que justifica porque ícone favorito.

Por que ele é importante?

Desde que o recurso de abas / guias tornou-se disponível em diferentes navegadores, os favicons passaram a ser exibidos junto ao nome do site em cada aba.

Se você já teve uma janela de browser com muitas guias abertas, cada qual relativa a um diferente site, deve ter notado que conforme sua largura diminui para acomodar novas guias, o nome do site é ocultado e só é exibido o ícone relativo a ele.

Portanto, o favicon nessa condição exerce o papel de ajudar a identificar visualmente qual site corresponde a cada guia, sem que se tenha que posicionar o cursor do mouse sobre cada uma para saber a qual site se refere.

De certa forma, isso quase que “obriga” o visitante a lembrar qual favicon corresponde a cada site e, portanto, contribui para fazer uma associação mental da imagem com o site e que é particularmente desejável quando o ícone favorito é igual ao logotipo.

Note que é um processo semelhante ao que já fazemos com os ícones em outras situações, como no sistema operacional do seu desktop ou notebook, ou mesmo no Android ou iOS do seu smartphone.

Indo além, entre os muitos aspectos do trabalho de branding que as marcas fazem, o favicon é um dos elementos visuais, junto com cores, fontes e logotipo na composição da identidade visual na mente dos consumidores.

E se já não fossem razões suficientes, os favicons também têm sido usados nos atalhos de sites que podem ser configurados nas páginas iniciais dos navegadores, como no Microsoft Edge, nos atalhos criados na área de trabalho, em links compartilhados por alguns apps e até ao lado do nome do site, nas páginas de resultados de sites de busca (SERPs) do Google e do Microsoft Bing.

Portanto, ele ajuda a identificar de forma rápida e visual o respectivo site, em uma série de situações. A cada visualização por parte do usuário, é uma nova oportunidade de trazer sua marca à mente do visitante.

Que cuidados deve ter ao criar um favicon?

Da mesma forma que qualquer imagem usada na Internet, é preciso observar alguns cuidados ao criar um favicon.

Como mencionamos, em seu uso nas guias de um navegador para desktop / notebook, a resolução comumente exibida, é a mínima e que é de 16X16 pixels.

Porém em smartphones, dependendo do tamanho da tela e sua resolução, 48X48 pixels seja o indicado.

Lembre-se que ampliar uma imagem, implica em perda de qualidade visual. Logo, o indicado é partir de resoluções maiores de tal forma que quando for necessário a exibição em maior resolução, não ocorra essa perda.

De modo geral, além das resoluções que serão necessárias, é preciso atentar para os seguintes aspectos:

• Quantidade de cores – especialmente em resoluções menores, há perda da nitidez / definição da imagem quanto mais cores são usadas, por isso, opte por usar imagens com menor quantidade de cores;

• Paleta – naturalmente que a paleta de cores usada no site e materiais da marca, é o ponto de partida para sua criação, todavia é preciso ficar atento a situações como a navegação anônima ou privada e que geralmente nos navegadores faz uso de um tema escuro e que resulta em pouco contraste para favicons com paletas escuras;

• Proporções – o quadrado (mesmas medidas para altura e largura) é o padrão do favicon, razão pela qual um retângulo ou outro formato que não seja quadrado, acarretará prejuízo na visualização. Imagine um logotipo retangular, cuja largura seja muito maior do que a altura, no processo de redução a definição visual será afetada;

• Logotipo – é comum fazer uso do logotipo para produzir o favicon, no entanto, se ele não atende aos requisitos acima, o resultado final pode não ser adequado. Nestes casos, indica-se produzir uma alternativa que remeta ao logo ou outro aspecto da identidade visual da marca;

• Fontes – ao criar favicons que fazem uso de fontes, é preciso atentar ao que já alertamos quanto a definição, pois a legibilidade será afetada. Mais do que duas letras, não é comum justamente por essa razão, como é o caso do favicon da HostMídia;

• Transparência – alguns dos formatos de imagens que podem ser usados, permitem usar o recurso de transparência, o que significa que determinadas áreas da imagem podem assumir a cor do plano de fundo. Pode ser um grande problema se a cor do fundo for igual ou até próxima dos elementos que não são transparentes;

• Matriz – qualquer que forem os tamanhos de ícones produzidos, a imagem matriz e que mais tarde será usada para produzir versões menores, deve partir de 512X512 e ter no máximo 1.024 KB, sendo recomendado muito menos que isso se possível;

• Vetor – dê preferência para criação da matriz em um formato vetorial (PNG ou SGV), em detrimento dos formatos baseados em mapas de bits (GIF ou JPG), pois quando for necessário redimensionar, não há perda da qualidade / definição da imagem;

• Formato – há navegadores que são capazes de renderizar diferentes formatos de imagens, mas nem todos. Assim, se não quiser correr o risco de não ter o favicon exibido em algum, especialmente os usados em dispositivos móveis, prefira usar o .ico, que é compatível até mesmo com navegadores bem antigos.

Como criar um favicon?

O ideal é utilizar um editor de imagens que ofereça recursos, como o Photoshop ou o Gimp. Mas mesmo que não tenha nenhum, há boas opções de editores de imagem online, sendo que alguns até permitem salvar no formato .ico.

A maior vantagem dos programas citados, é que ao criar um arquivo .ico, você pode salvar em um mesmo arquivo imagens em diferentes resoluções (16X16, 48X48, 96X96, …).

Se o logotipo do site / empresa já tem características apropriadas – é quadrado, tem boa resolução e poucas cores – você pode usá-lo como ponto de partida. Porém, caso for criar um especificamente para uso no site, tenha em mente os cuidados anteriormente listados, especialmente os relativos à matriz.

O formato SVG e PNG, são os que produzem os melhores resultados visuais, especialmente diante de redimensionamento e para uso diversos, cujos tamanhos variam. No entanto, é importante lembrar que eventualmente alguns navegadores, especialmente os mais antigos, podem não exibi-los.

Alternativamente, há serviços online pelos quais é possível criar ícones favoritos em diferentes resoluções, bem como formatos também, a partir de uma imagem, que pode ser o seu logo, por exemplo:

• Favicon.io;

• Favicon and AppIcon Generator;

• Logaster;

• Favicon.cc;

• Favi-o-Matic.

Como coloco o favicon no meu site?

O primeiro passo, é enviá-lo via FTP para o diretório raiz do seu site.

Não é necessariamente obrigatório que seja na raiz, porém suponhamos que algum visitante acesse diretamente a URL de uma imagem, clicando para abri-la em uma nova aba. Nesse caso, o favicon não aparecerá na guia aberta. Mas se ele estiver na raiz, sim!

Também é recomendável usar convenção do nome padrão, ou seja, favicon.ico.

Por fim, deve-se incluir a seguinte linha, a qual deve estar entre as tags HEAD do site:

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

Caso o arquivo não esteja na raiz, o caminho para a pasta deve constar em HREF.

Conclusão

O favicon é um recurso essencial dos sites e que contribui para a sua identidade visual e até mesmo facilita o seu acesso e a navegação web.