Quem tem o costume de utilizar muitas páginas ao mesmo tempo sabe muito bem a importância de um pequeno ícone que aparece em cada aba do navegador. Ele não existe por acaso! Chama-se favicon e, se você empreende e tem um negócio online, a maneira como o utiliza pode trazer resultados positivos ou negativos para sua marca.
Pode parecer um detalhe bobo, mas ele interfere na presença online do seu negócio. Porém, quando aplicado de maneira estratégica e adequada, pode proporcionar uma experiência mais coesa para seus clientes e potenciais leads.
O que é um favicon?
O nome favicon vem da abreviação de “favorite icon” (do inglês, “ícone favorito”). Ele pode ser definido como uma miniatura de um ícone gráfico que representa uma marca na internet.
A imagem utilizada geralmente é a do logotipo ou as iniciais da empresa. No entanto, é possível utilizar até mesmo GIFs e outras imagens alinhadas com a estratégia da marca.
Para que serve um favicon?
Um favicon serve, principalmente, para facilitar o reconhecimento do site pelo usuário, reforçar a imagem da marca na web e transmitir credibilidade para o negócio. Confira outros detalhes sobre o seu uso:
Facilidade de navegação e reconhecimento
Em um mar de abas abertas, o favicon é o farol que facilita a navegação na web. Isso porque, quando bem aplicado, ele pode ser rapidamente reconhecido pelos usuários, sendo associado a um determinado site ou empresa. A medida contribui para uma boa experiência do cliente.
Além disso, como o favicon aparece em outras instâncias, também auxilia na localização de páginas marcadas como favoritas e ao buscar algum conteúdo no histórico do navegador ou mecanismos de busca, como o Google.
Impacto na imagem da marca
O favicon contribui significativamente para a imagem da marca. Enquanto um ícone em alta resolução, bem projetado e alinhado à identidade visual do site ou da empresa transmite uma mensagem de profissionalismo e confiabilidade, o contrário também acontece.
Favicons mal diagramados, de baixa qualidade, não otimizados para vários navegadores ou sem muita relação com a marca passam uma ideia de desleixo e amadorismo. Dessa forma, eles podem até mesmo causar uma impressão de que a pessoa acessou um site falso, afetando a credibilidade do negócio.
Onde um favicon pode ser adicionado no site?
O favicon costuma ficar posicionado ao lado esquerdo da aba e no título da página, assim como na barra de favoritos e no histórico de navegação ou antes da URL do site, na barra de endereços.
Como criar um favicon para o seu site?
Antes de qualquer coisa, é importante reforçar que o favicon deve seguir a mesma identidade visual da marca ou da campanha atual. Isso significa que, se esse fator for alterado ou o logo for atualizado, o favicon também deve ser ajustado para manter a coesão.
Para criar um favicon, basta seguir os passos abaixo:
1. Escolhendo o design certo
A escolha do favicon deve ser estratégica. Empresas tradicionais ou de nichos sérios geralmente escolhem uma versão simplificada do logotipo. Já companhias modernas podem utilizar imagens diferentes, mas relacionadas à marca, ou optar por uma imagem com transparência e até animada.
Outra opção é escolher uma imagem temporária para campanhas promocionais, como Black Friday e a Semana do Consumidor, ou eventos sazonais, como Natal, Halloween e o Dia dos Namorados. A questão mais importante aqui é que o design faça sentido com a identidade da marca no momento.
2. Formatos e dimensões ideais
Diversos formatos de arquivo podem ser utilizados para o favicon, sendo os mais comuns os com finais .ico e .png.
Já quando o assunto é dimensão, o padrão tradicional é de 16×16 pixels. Porém, atualmente, a recomendação é disponibilizar algumas opções de tamanho e otimizar o ícone para acessos de dispositivos com diferentes resoluções de tela, além de plataformas mais exigentes.
Dessa forma, as dimensões ideais são:
- 32×32 pixels: para a maioria dos navegadores de PCs e macOS.
- 48×48 pixels: melhor tamanho para a barra de favoritos e resultados em buscadores, bem como o navegador Safari dos dispositivos macOS e iOS.
- 96×96 pixels: para ícones de atalhos no desktop.
- 180×180 pixels: apresenta melhor qualidade em novos smartphones e tablets, incluindo dispositivos Android e iOS (Apple Touch).
- 192×192 pixels ou mais: embora não seja um requisito, oferecer opções de dimensões maiores permite uma melhor qualidade de exibição em navegadores de smart TVs e displays de alta definição.
3. Ferramentas para criar um favicon
A imagem do favicon deve ser criada pelo seu designer ou equipe de design. Se você já a tiver pronta, no formato quadrado e em alta resolução, é possível utilizar gratuitamente alguma ferramenta online para gerar as diferentes dimensões e exportá-las no formato .ico.
Há várias opções de geradores de favicon, mas seguem duas indicações:
- Genfavicon: disponível em português. Basta subir o arquivo, selecionar as dimensões desejadas, ajustar na pré-visualização e baixá-lo.
- RealFaviconGenerator: em inglês. Suba o arquivo e clique em “Next” ao fim da página. Será gerado um pacote do favicon com várias dimensões e formatos, além de instruções completas sobre como aplicá-lo em diferentes plataformas utilizando HTML ou frameworks para front-end, como React, Grunt, Ruby on Rails e outras.
Como adicionar um favicon no seu site?
Você pode adicioná-lo ao seu site de duas formas, dependendo do formato utilizado. Para usar arquivos em formato .png ou .ico, certifique-se de que a imagem desejada esteja nomeada como “favicon.ico” ou “favicon.png” e suba o arquivo na pasta public_html do Gerenciador de Arquivos, localizado no painel do seu serviço de hospedagem.
Se você gerencia seu próprio site e usa VPS, por exemplo, basta colocar a imagem na pasta raiz, a mesma que está configurada no seu servidor web. Grande parte dos navegadores identificará o favicon nesses formatos.
Usando HTML para incluir o favicon
Se você deseja uma imagem animada .gif ou em outro formato, também é possível usar seu favicon. Faça o mesmo processo anterior e, então, acesse o arquivo header.php e adicione a sintaxe HTML abaixo, ao final da tag <head> e antes do fechamento </head>:
<link rel=”shortcut icon” type=”image/gif” href=”favicon.gif” >
Nesse exemplo, utilizamos .gif, mas podem ser aplicados outros formatos, desde que sejam de imagem.
Configurações para diferentes plataformas e navegadores
Para garantir que seu favicon seja exibido corretamente em qualquer navegador, plataforma ou dispositivo, siga as instruções anteriores, mas utilize uma sintaxe para cada versão. Por exemplo:
- <link rel=”shortcut icon” href=”/favicon.ico” />
- <link rel=”icon” href=”favicon-16×16.png” sizes=”16×16″ type=”image/png”>
- <link rel=”icon” href=”favicon-32×32.png” sizes=”32×32″ type=”image/png”>
- <link rel=”icon” type=”image/png” href=”/favicon-96×96.png” sizes=”96×96″ />
- <link rel=”apple-touch-icon” sizes=”180×180″ href=”/apple-touch-icon.png” />
Pode parecer exagero, mas esse procedimento garante compatibilidade com navegadores de desktop, dispositivos móveis e equipamentos inteligentes em diferentes sistemas operacionais.
Erros comuns ao criar um favicon
Assim como existem as melhores práticas para desenvolver o seu favicon, também há diversos erros que acontecem com frequência durante sua criação. Abaixo destacaremos alguns dos principais pontos de falha em favicons e como evitá-los ao criar os do seu negócio:
Exagerar no design
Como as dimensões do favicon são muito pequenas, o design da imagem deve ser o mais simplificado possível. Caso seu desenho seja complexo, ele pode tornar-se ilegível no tamanho reduzido, prejudicando a identificação por parte do usuário.
Para que isso não ocorra, opte por versões minimalistas da imagem escolhida, inclusive se ela for apenas as iniciais ou o logotipo da empresa.
Sobrecarga de detalhes
Ornamentar o design com muitos elementos gráficos ou escolher uma fonte muito detalhada também pode prejudicar a legibilidade do favicon.
Assim, se a imagem ou o logo forem muito detalhados, escolha apenas um elemento que os represente .
Escolher um ícone de baixa qualidade
Utilizar uma imagem de baixa qualidade para o seu ícone pode prejudicar a imagem do seu site ou negócio. Para que isso não ocorra:
- Utilize as versões do favicon nos tamanhos e formatos recomendados;
- Certifique-se de que a imagem tenha uma resolução igual ou maior a 96 ppi (pixels por polegada);
- Se não souber redimensionar ou converter a imagem, peça ajuda de um profissional de design ou, então, utilize um dos geradores de favicon indicados antes.
Ignorar o tamanho e a visibilidade em dispositivos móveis
Por fim, outro erro comum é não considerar a visibilidade do favicon em dispositivos móveis, como smartphones e tablets.
No Brasil, por exemplo, mais da metade dos acessos ocorre por meio do celular. Nesse sentido, é imprescindível utilizar favicons adequados e, de preferência, testar a sua legibilidade.
O favicon pode ser apenas um pequeno ícone, mas como você pôde ver neste artigo, ele influencia muito em como a sua marca é vista na internet.
Fonte: LocaWeb
