Como colocar favicons no seu site

PUBLICADO POR AYLTON INACIO
Tutoriais e Artigos > Websites e SEO

Se você tem um site e se preocupa como sua marca é apresentada, configurar um favicon corretamente vai garantir que ela apareça sempre vinculada.

Um favicon (do inglês favorite e icon) é um ícone que representa sua marca (logotipo), ou seja, uma imagem bem pequena e que aparece com o seu site nas abas dos navegadores, nos resultados de pesquisa do Google, na tela inicial dos celulares, entre outros lugares.

Se preferir, acesse "Como colocar favicons no seu site" no YouTube. A aula conta com muito mais detalhes, como implementação em WordPress, ferramentas, caso real e introdução ao cPanel.

Como inserir favicons no seu site

Você pode inserir um favicon no seu site da maneira padrão, seguindo as diretrizes do Google, e isso já vai garantir um boa apresentação e vinculação. Você também pode complementar a configuração pensando em dispositivos móveis e suas resoluções, cada vez mais poderosas.

Como qualificar seu site para usar favicon padrão e nos resultados de pesquisa do Google:

1. Crie um ícone quadrado (O Google recomenda múltiplo de 48 pixels)
   Utilize Photoshop ou alguma ferramenta online para criar a imagem
2. Salve o arquivo como ICO ou PNG (também aceita outros formatos)
3. Faça o upload do arquivo para o servidor do seu site (na raiz ou alguma pasta)
4. Faça o teste acessando seusite.com.br/seuicone.formato
5. Adicione a tag link no cabeçalho HTML do seu site com o caminho do ícone:

   <link rel="shortcut icon" href="/caminho/favicon.ico">

6. Aguarde o Google rastrear a página inicial do seu site.

É possível informar o Google sobre alteração no favicon ou "acelerar" o processo, para isso solicite a indexação usando a Inspeção de URL ou Enviando um sitemap atualizado pelo Google Search Console.

Se você quiser complementar a configuração com regras específicas de acordo com o dispositivo (Android, iPhone, Windows Phone, PWA) e suas altas resoluções atuais, é possível melhorar o código informando diversas versões do favicon.

O atributo rel pode receber "shortcut icon", "icon", "apple-touch-icon" e "apple-touch-icon-precomposed". Sendo assim, é possível carregar diversas versões do ícone, inclusive usando o atributo sizes, como no exemplo a seguir.

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" sizes="57x57" href="https://ayltoninacio.com.br/img/favicons/apple-touch-icon-57x57.png"
<link rel="apple-touch-icon" sizes="60x60" href="https://ayltoninacio.com.br/img/favicons/apple-touch-icon-60x60.png"
...
...

Você deve pesquisar os tipos de configurações para cada dispositivo e recurso desejado, ou automatizar o processo de criação com ferramentas online.

Alguns pontos importantes sobre diretrizes do Google:

• A página inicial do site precisa ser rastreável pelo Google.
• A página inicial do site e favicon não podem estar bloqueados no robots.txt
• Evite alterar com frequência a URL do favicon.
• Seu favicon não pode incluir pornografia, símbolo de ódio ou coisas do tipo.

Se o site e favicon não estiverem de acordo, o Google colocará um ícone padrão.

Como automatizar a criação dos favicons

Se você quiser configurar a maior quantidade possível de favicons com facilidade, utilize uma das diversas ferramentas na internet que automatizam o processo. Você só precisa fazer o upload da imagem base, solicitar a geração e depois baixar as versões criadas, inclusive com o código HTML para inserir no site.

Pesquise na internet por "favicon generator" e encontre a melhor ferramenta para você. A Favicomatic.com é uma delas e funciona muito bem para gerar o pacote com imagens e códigos.

Já o site realfavicongenerator.net oferece o teste dos ícones do seu site (recursos implementados) e também uma ferramenta muito completa para a criação.