Fique por dentro das novidades do seu tema preferido

Aprenda a criar sites incríveis com facilidade

Use o poder da internet para divulgar o seu negócio

Inspire-se com as estratégias de grandes empresas

Conteúdos variados para alavancar os resultados do seu projeto

A confirmação da sua inscrição foi enviada para o seu e-mail

Agradecemos sua inscrição e esperamos que você aproveite nossos conteúdos!

Como criar um favicon para seu site

Compartilhe:

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).

Tabela de compatibilidade - Favicon e navegadores web

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:

  1. Acesse a ferramenta e clique no botão Select your Favicon picture;
  2. 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.
  3. Depois de subir a imagem, realize as configurações desejadas, escolhendo as opções de acordo com a tecnologia que deseja contemplar;
  4. Clique na opção Generate your Favicons and HTML code;
  5. A ferramenta vai gerar automaticamente um pacote de imagens para download, além dos códigos HTML;
  6. Baixe o pacote com as imagens – Favicon package (trata-se de um arquivo zipado com as imagens geradas para todos os formatos selecionados);
  7. 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;
  8. Copie e cole os códigos gerados na seção <head> de suas páginas HTML.
Favicon HostGator varios formatos

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!

Navegue por tópicos

  • Favicon: compatibilidade com os principais navegadores

  • Como criar e adicionar o favicon no seu site

Tags:

  • Criar Site

Snappy da HostGator

Eu sou o mascote oficial da HostGator! Sou super antenado nas tendências, principalmente se for algo bem nerd. E não fico desconectado da internet por nada! Sempre procuro me atualizar sobre novidades tecnológicas, pois sou muito hightech ;)

Mais artigos do autor

Garanta sua presença online

Encontre o nome perfeito para seu site

www.

Comentários