Dicas, ferramentas úteis e um passo a passo detalhado para criar o favicon e inserir esse ícone personalizado no seu site ou blog.
Atualizado em 03/07/2015 – Por: HostGator Brasil
Você pode até ficar confuso com o termo, mas com certeza já está familiarizado com o favicon (termo formado pela combinação de favorites + icon). Trata-se daquele pequeno ícone personalizado que aparece ao lado da barra de endereços ou no canto da aba de navegação quando acessamos um site.
O ícone, que também aparece quando adicionamos um site aos favoritos, tem forte vínculo com a usabilidade de um site. Porque? Como sabemos, elementos visuais são facilmente lembrados. O favicon – normalmente gerado a partir da simplificação do logotipo ou marca do site – facilita a navegação do usuário, já que destaca um site específico em meio ao universo de sites disponíveis.
Função importante, não acham? Hoje, na ausência de um favicon, os navegadores costumam exibir uma folha em branco.
Favicon: compatibilidade com os principais navegadores
Embora alguns navegadores sejam bem tolerantes quanto à extensão do favicon, outros possuem restrições. A maioria dos navegadores aceita imagens na extensão (.png), mas o mais seguro ainda é converter essa imagem em um ícone com extensão (.ico).
O tamanho médio do arquivo deve ser de 16×16 pixels. Mudanças recentes na resolução dos monitores incluíram outras necessidades, como arquivos de 32×32, além de arquivos compatíveis com dispositivos móveis.
Abaixo você encontra uma tabela com a compatibilidade dos principais navegadores (a partir de qual versão) com as diferentes extensões, conforme a Wikipédia (em inglês).
Como criar e adicionar o favicon no seu site
Para criar um arquivo com a extensão (.ico) é necessário enviar a imagem para conversão. Várias ferramentas estão disponíveis na internet, e podem ser utilizadas com bastante facilidade (já que são bem intuitivas).
Entre as ferramentas, destaque para a Real Favicon Generator (beta), que permite gerar um favicon multiplataforma. Em vez de gerar um único arquivo favicon.ico, a ferramenta gera as imagens e o código HTML para computadores, além de gerar formatos compatíveis com as últimas versões do Windows (PCs e tablets), iOS (iPhones e iPads), telefones e tablets Android, entre outros formatos.
Abaixo, o passo a passo para uso da ferramenta:
- Acesse a ferramenta e clique no botão Select your Favicon picture;
- Selecione a imagem desejada (o ideal é inserir uma imagem de 260 x 260). No entanto, a ferramenta permite o envio de imagens a partir de 70 x 70.
- Depois de subir a imagem, realize as configurações desejadas, escolhendo as opções de acordo com a tecnologia que deseja contemplar;
- Clique na opção Generate your Favicons and HTML code;
- A ferramenta vai gerar automaticamente um pacote de imagens para download, além dos códigos HTML;
- Baixe o pacote com as imagens – Favicon package (trata-se de um arquivo zipado com as imagens geradas para todos os formatos selecionados);
- Envie os arquivos de imagem para o diretório raiz do seu site. Se o seu domínio é http://meudominio.com.br, você deve conseguir acessar um arquivo chamado http://meudominio.com.br/favicon.ico;
- Copie e cole os códigos gerados na seção <head> de suas páginas HTML.
Além de gerar a imagem em vários formatos, a ferramenta disponibiliza uma função para verificação de favicon, que realiza a análise do que pode melhorar nos favicons de um site já publicado.
Além da Real Favicon Generator, várias outras ferramentas para gerar a imagem em formato (.ico) estão disponíveis na web. Confira algumas opções:
Uma recomendação: como é um arquivo muito pequeno, procure mantê-lo bem simples, com poucas cores e detalhes. Afinal, o objetivo é manter a identidade visual do site, e garantir visibilidade para a marca.
Independentemente da ferramenta que utilizar, lembre-se que favicon.ico é o nome do arquivo com o ícone (manter a denominação é fundamental).
Caso encontre dificuldades na visualização do favicon no seu site, limpe o cache do navegador e atualize a página até que o ícone fique visível para você.
Importante: certifique-se de ter colocado o código na parte correta (você pode visualizar o código-fonte da página pressionando CTRL + U) e que o endereço para a imagem esteja certo.
E Não esqueça de assinar a nossa newsletter para não perder nenhum conteúdo publicado no blog da HostGator!