Snappy

HostGator Blog

Blog oficial da HostGator

Como criar e adicionar um favicon ao seu site

Escrito por HostGator Brasil

terça-feira, 01 de fevereiro de 2011

Share Button

Atualizado em 03/07/2015 – Por: HostGator Brasil

como criar um favicon para seu site

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 da hostgator para vários 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.

Tem mais alguma dúvida sobre o uso de favicons no seu site? Compartilhe conosco no espaço para comentários.

 



Sobre HostGator Brasil

Fundada em 2002, a HostGator hoje é uma líder mundial no fornecimento de serviço de hospedagem. Com a Matriz sediada em Houston – Texas, oferecemos serviços de qualidade superior para clientes em mais de 200 países a nível internacional com a nossa equipe de mais de 300 funcionários.

Postado em:

Design, Marketing Digital
Comentários
  • Paulo Gastardelli

    Estou com todos os arquivos baixados e o código copiado. Preciso agora de um passo-a passo para continuar. Qual é o meu próximo passo agora? Pode me ajudar? Abrir meu domínio? Como faço isso? Como saber meu domínio,pois um amigo iniciou o site e agora está tudo em minhas mãos e não sei muita coisa o que já deu pra perceber.Preciso de ajuda urgente. Grato!

    • hostgatorbrasil

      Olá, Paulo! Tudo bem? Para adicionar o favicon você deve ter acesso ao seu domínio e ao CMS em que seu site está (Joomla, WordPress, entre outros), para poder administra-lo e edita-lo. Você é nosso cliente? Se precisar de ajuda especializada, consulte nosso suporte 🙂 Esperamos ter ajudado.

      • Paulo Gastardelli

        Olá!Tenho acesso a um Cpanel onde consigo gerenciar arquivos no hostgator e acesso também painel do prestashop onde posto meus produtos na loja virtual. Agora esse acesso ao domínio não sei dizer e CMS muito menos. Poderia me explicar? A única coisa que quero é colocar o logo de minha empresa qu já está em ICO 16X16 pixels na barra de endereço do navegador.Preciso de uma vídeo aula falando sobre esses assuntos . Obrigado!!!

        • hostgatorbrasil

          Bom dia, Paulo! Que bom saber que você já é nosso cliente 🙂 Infelizmente não possuímos vídeos nesse estilo, mas agradecemos sua sugestão. Recomendamos que você entre em contato com nosso suporte e procure saber mais sobre o serviço JumpStart, que pode te fornecer um atendimento mais personalizado e detalhado, atendendo suas necessidades. Esperamos ter ajudado! Tenha uma boa semana.

  • HEBERT JULIO DOMINE CERVINI

    INTERESSANTE

    • hostgatorbrasil

      Legal, né? Que bom que você curtiu 🙂 Obrigado por deixar sua opinião.

  • Milena

    Olá. Quando eu uso o control+U no index html, aparece uma janela que não consigo editar. Então estou entrando com F12, então naquela janela que abre embaixo eu acho o head e dou um “editar como html”. Então no espaço entre e colo os arquivos que o Real Favicon Generator criou…
    Só que não acontece nada. No meu site continua aparecendo o jacaré da hostgator. O que estou fazendo de errado? (obs: para a construção do site usei o weebly).

    • hostgatorbrasil

      Olá, Milena! De fato, nossa equipe identificou a necessidade de correção na publicação do favicon para alguns clientes utilizando o Weebly. Nós já estamos trabalhando na solução do problema. Assim que tivermos atualizações sobre o assunto, avisaremos. Obrigado pela compreensão.
      Caso queira um acompanhamento técnico mais específico, por gentileza entre em contato através de nossos canais de atendimento.

  • Alberto

    Muito bom mas, como faço para acessar esse código-fonte do meu blog? Já sei que clicando ctrl+U aparece o código-fonte mas, como eu edito esse código? Onde ele está localizado no meu site? Agradeço.

    • hostgatorbrasil

      Olá, Alberto! Para realizar a alteração, acesse o cPanel. Na aba Arquivos, selecione a opção Gerenciador de Arquivos. Selecione a pasta, no caso, a pasta correta é public_html. Na página que abre, selecione o arquivo index.html e realize a edição do código, inserindo o código antes do fechamento da tag .
      Caso você utilize algum CMS como o WordPress como plataforma
      para seu blog, o ideal é que você instale um plug-in para realizar a alteração.O plug-in deve realizar a alteração no código automaticamente.

  • Micaela Diniz

    Olá adicionei o meu entre a tag em index.html na pasta public_html. Funciona, só que no dia seguinte o código simplesmente some. Alguém pode me dizer se estou fazendo algo de errado?

    • hostgatorbrasil

      Olá Micaela! O procedimento que fez parece correto.
      Uma dica é verificar se existe algum script sobrescrevendo as alterações que você faz no código fonte do site.

  • Alberto Pazuello

    Muito bom tut.

    • hostgatorbrasil

      Que bom que gostou, Alberto! Se tiver sugestões para novos conteúdos, fique à vontade para sugerir. 🙂

  • gabriela

    onde devo adicionar o favicon?

    • hostgatorbrasil

      Olá Gabriela! O favicon deve ser adicionado ao código html da página, antes do fechamento da tag . Para visualizar o código-fonte da página, pressione CTRL + U.

  • rederson

    alguem pode me ajudar nao tendi 🙁
    ]

  • http://www.andrebastos.com.br André Bastos

    Perfeito 😉