O que é favicon e como adicioná-lo ao seu site?

O ditado “coisas boas vêm em embalagens pequenas” certamente se aplica ao humilde favicon. Esses pequenos emblemas de marca estão presentes nos navegadores web desde os tempos do Internet Explorer nos anos 1990, aparecendo nas abas do navegador e nas visualizações de favoritos. Os favicons são lembretes visuais que ajudam o cliente a associar seu site com a identidade da marca da sua empresa.

É hora de ir além do ícone genérico do navegador. Em pouquíssimo tempo, você pode criar um favicon que causa uma impressão marcante (e ajuda os clientes a navegarem em uma janela do navegador lotada de abas).

O que é favicon?

Um favicon é um pequeno gráfico que aparece ao lado dos títulos das páginas nas abas do navegador web, barras de favoritos, barras de marcadores, resultados do histórico do navegador e páginas de resultados de mecanismos de busca (SERPs).

Uma junção das palavras “favorite icon” (ícone favorito), o favicon serve como um marcador visual para seu site e ajuda as pessoas a identificarem facilmente uma página web quando têm várias abas abertas. Os favicons podem aparecer como ícones de atalho na barra de tarefas quando um site é minimizado. Quando os usuários salvam seu site nos favoritos, o favicon funciona como um ícone de marcador, facilitando encontrar o site entre outras páginas web salvas.

Em alguns sistemas operacionais, arrastar e soltar URLs da janela do navegador para a área de trabalho cria ícones de atalho na área de trabalho. Os favicons do navegador também são frequentemente reaproveitados como ícones de atalho.

Benefícios de usar favicons

• Aumenta a CTR
• Construa reconhecimento da marca
• Melhora a experiência do usuário e o tempo de permanência

Um favicon não vai magicamente impulsionar o ranking de otimização para mecanismos de busca (SEO) do seu site, mas adicionar um, junto com outras melhorias de design UX, pode contribuir para um site mais favorável ao usuário. A seguir, estão algumas outras maneiras pelas quais um favicon pode afetar o desempenho do seu site.

Aumenta a CTR

O Google e outros mecanismos de busca exibem favicons nos resultados de pesquisa. Um favicon atraente ou facilmente reconhecível pode impulsionar o reconhecimento da sua marca, tornando mais provável que as pessoas visitem seu site. Isso aumenta sua taxa de cliques (CTR), que é uma importante métrica de e-commerce para SEO.

Construa reconhecimento da marca

Quando um favicon reforça o logotipo da sua marca, atua como uma peça de publicidade gratuita na barra de favoritos do usuário, na aba do seu site e nas SERPs, o que pode aumentar o reconhecimento da marca.

Melhora a experiência do usuário e o tempo de permanência

Um favicon instantaneamente reconhecível pode aumentar a chance de um usuário salvar sua página web nos favoritos, um comportamento que um mecanismo de busca como o Google reconhece como um sinal positivo. Essa pequena melhoria na experiência do usuário incentiva visitas de retorno, aumentando o tráfego do seu site e o tempo de permanência (quanto tempo um usuário passa em uma página web antes de retornar à SERP).

Diretrizes para criar um favicon para seu site

• Escolha o tamanho certo
• Escolha um formato de arquivo compatível
• Considere um favicon animado

Um bom favicon está em conformidade com requisitos específicos de tamanho e formato de arquivo.

Escolha o tamanho certo

O tamanho ideal para um favicon é 16 pixels por 16 pixels, embora alguns favicons sejam projetados em 32 pixels por 32 pixels ou 48 pixels por 48 pixels. O tamanho 16 por 16 é compatível em todas as exibições de navegadores web: barra de endereços, abas ou visualizações de favoritos. É a escolha mais segura.

Escolha um formato de arquivo compatível

O formato de arquivo original desempenha um papel crucial em quão bem uma imagem se traduz em um favicon. Os formatos de arquivo de favicon mais comuns para criar um favicon são PNG e ICO. Arquivos PNG contêm compressão de dados sem perdas e transparência, então a qualidade da imagem não sofrerá alterações quando forem redimensionados. Arquivos ICO, usados no Windows Explorer da Microsoft, contêm uma ou mais imagens em vários tamanhos e profundidades de cor, então podem ser redimensionados. O formato SVG não é tão compatível com navegadores, mas carrega rapidamente e é infinitamente escalável. Evite formatos como JPEG que perdem alguns dados da imagem quando reduzidos.

Considere um favicon animado

GIFs animados ou arquivos Javascript adicionam dinamismo, mas têm limitações, sendo uma delas a compatibilidade do navegador. Teste seu favicon animado em vários navegadores, já que o que fica ótimo no Google Chrome pode não funcionar em outro navegador.

Geradores de favicon populares

Você pode usar um gerador de favicon on-line para criar um favicon personalizado que complemente a identidade da sua marca.

• Favicon.io permite criar um favicon de um arquivo de imagem, link ou texto e convertê-lo em diferentes formatos. Baixe os arquivos convertidos, coloque-os no diretório raiz do seu site, copie as tags de link e cole-as na tag head da sua página HTML.

• RealFaviconGenerator é uma interface de programação de aplicativos (API) interativa que permite especificar como deve lidar com a imagem principal para gerar o favicon.

• Favicon Generator pode criar favicons plataforma por plataforma, permitindo ver como os designs ficam em diferentes plataformas e navegadores.

• Favicon.ico & App Icon Generator da Dan’s Tools permite fazer o upload de uma imagem existente e convertê-la para formato ICO, ou navegar pelos designs na galeria de ícones.

Como adicionar um favicon ao HTML

Depois de criar o favicon do seu site, você precisará fazer upload dele no seu site e adicionar códigos para que navegadores e aplicativos web possam exibi-lo.

Um ponteiro para o favicon aparece como uma linha de código na seção <head> do arquivo HTML do site. Os navegadores leem as instruções na tag “head” para encontrar o favicon e exibi-lo. Digamos que seu arquivo favicon seja um arquivo PNG chamado “iconemarcaX.png.” Simplesmente adicione esta linha dentro da tag <head></head>:

<link rel="icon" type="image/png" rel="noopener" target="_blank" href="/br/iconemarcaX.png">

O favicon pode aparecer em qualquer diretório do site. No exemplo, está contido no diretório raiz do site, uma localização comum. Verifique se o caminho do arquivo está correto.

Também é possível ter mais de um tamanho de favicon e carregar todos. Você precisará de uma linha de código para cada tamanho, todas dentro da tag <head> </head>. Dê a cada tamanho um nome de arquivo único e adicione um atributo “sizes” ao código:

<link rel="icon" type="image/png" sizes="16x16" rel="noopener" target="_blank" href="/br/iconemarcaX16x16.png">

<link rel="icon" type="image/png" sizes="32x32" rel="noopener" target="_blank" href="/br/iconemarcaX32x32.png">

Como adicionar um favicon a um site Shopify

Se você tem um site Shopify, pode facilmente adicionar um favicon sem necessidade de codificação.

1. Em um navegador web desktop, acesse o painel administrativo da sua loja on-line.
2. Selecione “Temas” > “Personalizar” para abrir o editor de temas.
3. Clique em “Configurações do tema”. Procure pelo ícone de engrenagem.
4. Selecione “Favicon” (em alguns temas isso é chamado de “Logo”).
5. Selecione sua imagem da “Biblioteca da Loja” ou faça upload de uma nova.
6. Se estiver disponível, edite o “Texto Alternativo (Alt text)” para o favicon para fins de acessibilidade. Este texto aparecerá quando um usuário passar o mouse sobre o favicon.
7. Salve seu trabalho e teste o desempenho do favicon em diferentes navegadores.

Para mais informações sobre adicionar favicons de um iPhone ou dispositivo Android, veja o tópico de ajuda da Shopify sobre o assunto.

Como adicionar um favicon no WordPress

Se sua loja on-line é um site WordPress, confira um guia passo a passo para adicionar um favicon.

1. Acesse o painel do WordPress e clique em “Aparência”.
2. Clique em “Personalizar” para ver uma lista de opções.
3. Clique em “Identidade do site”. São configurações relacionadas a título, slogan e logo.
4. Na seção “Ícone do site”, clique em “Selecionar ícone do site” para fazer upload da nova imagem do favicon.
5. Clique em “Publicar” para entrar no ar.
6. Teste a aparência do favicon em vários navegadores web.

Como adicionar um favicon no Wix

Um site Wix vem com um favicon padrão, mas membros do Plano Premium podem personalizá-lo. Siga as etapas a seguir para alterar o favicon no seu site Wix.

1. Acesse “Configurações” no painel do site.
2. Ao lado de “Favicon”, clique em “Gerenciar”.
3. Clique em “Fazer upload de imagem” ou clique em “Fazer upload de mídia” para fazer upload de uma imagem do seu computador.
4. Clique em “Adicionar à página”. Visualize a aparência do favicon na aba do seu navegador.
5. Clique em “Salvar” e depois em “Publicar”.