Favicon, Como Criar e Para que Serve

Antes de mais nada vamos entender o que é um Favicon:

“Favicon é uma palavra derivada de favorite (favorito) e icon (ícone). Uma imagem no formato .ico (ponto ico) com cerca de 16×16 pixels que ficam guardados em um site para visualização pelo navegador” (informação: Wikipédia )

Favicon

No popular, favicon é aquela imagem que você vê ao lado do título da página na aba do navegador ou ao lado do endereço na barra de endereços.

E para que serve isso?

O favicon geralmente é associado ao logotipo do site, quer dizer, ele ajuda a compor a identidade visual do site. Você pode até não se tocar, mas existem marcas pela web que você reconhece pelo favicon e nem percebe. Por exemplo:

Como Criar Um Favicon

E como criar um favicon?

Antes de mais nada, você vai precisar de uma imagem para usar como seu favicon. Assim como vimos nos exemplos acima, procure usar uma imagem que tenha a ver com o seu site, com o seu logotipo, cores, etc. Tudo para ajudar a criar a identidade do seu site.

Em seguida, você pode tanto usar um programa de edição de imagens para criar uma imagem com extensão .icon como um serviço on-line. No meu caso, uso e recomendo o Favicon fron Pics

Para usar, basta acessar o site e clicar em Enviar arquivo… escolhendo a imagem que você deseja transformar em favicon no seu computador e em seguida em Generate Favicon.ico. Como visto na tela abaixo:

Como Criar Um Favicon 2

Importante: a imagem deve ter 32×32 pixels para que o site Favicon from Pics transforme-a em um favicon de 16×16 que é o tamanho correto de um favicon ok?

Depois de clicar em Generate Favicon.ico você irá para a próxima página onde você deve clicar em Download Favicon Package para baixar o favicon criado para o seu computador.

Ao baixar o favicon que você acabou de criar, você vai receber uma pasta compactada. Ao descompactar essa pasta você vai perceber que foram criados dois ícones além da imagem que você mandou. Um é um favicon normal e outro um favicon “animado” que é a sua imagem em movimento. Aí cabe a você escolher qual pretende usar.

Escolha a sua imagem e hospede-a em um serviço de hospedagem de sua confiança. Pode ser gratuito ou não, você quem sabe. Só não dá para usar a hospedagem do Blogger para isso, pois ela não aceita arquivos com a extensão .ico.

Como implementar o favicon no meu blog?

Depois de converter a imagem e hospedá-la, você vai precisar adicionar um pequeno trecho de código ao código do seu blog, o qual será responsável por “chamar” essa imagem quando a página for carregada. Ou seja, vai fazer a imagem aparecer onde deve!

Em WordPress:

Na área de edição do seu blog, procure pela página header.php do seu tema e encontre a tag </head>.

Essa tag é responsável por fechar o seu cabeçalho e o código para chamar o favicon deve ser inserido ANTES dela. Eis o código:

<link rel=”shortcut icon” href=”ENDEREÇODAIMAGEM” type=”image/x-icon” />

Basta substituir onde está escrito ENDEREÇODAIMAGEM pela url de onde você hospedou a imagem.

No Blogger:

No caso do blogger, algumas pessoas não conseguem adicionar um favicon porque não sabem, mas é preciso além da imagem .ico uma imagem em jpg ou png para que o favicon apareça corretamente (coisas do blogger). Para tanto, além da imagem .ico que você já hospedou, você vai precisar de uma outra imagem igual só que normal, .jpg (ponto jpg) ou .png (ponto png) que pode ser criada no seu computador até no paint e hospedada em qualquer lugar, inclusive no próprio Blogger.

Depois de hospedar as imagens, vá até a parte de edição de html do blogger, e procure pelo trecho <b:skin><![CDATA[/* (está logo no começo do código) e cole o código a seguir ANTES desse trecho:

<!– favicon –>

<link href=’ENDEREÇODAIMAGEMPONTOICO’ rel=’shortcut icon’ type=’image/x-icon’/>

<link href=’ENDEREÇODAIMAGEMPONTOJPG’ rel=’shortcut icon’ type=’image/x-icon’/>

<!– end favicon –>

Faça as substituições indicadas no código pelos endereços das respectivas imagens e pronto!

Importante: Cuidado ao fazer as substituições nos códigos para não apagar nenhuma aspa, caso contrário o código não irá funcionar.

Faça bom uso e até o próximo tutorial!

Comments

comments