O que é favicon?

Provavelmente você já deve ter reparado que do lado esquerdo da barra de endereço e na abas do seu navegador aparecem pequenas imagens de acordo com o site visitado. Por exemplo, se você visitar o Google verá um pequeno “G” como na imagem abaixo:

Essas pequenas imagens são chamadas favicon. Os favicons são ícones geralmente no formato .ico com 16×16 pixels.

Antigamente essas pequenas imagens serviam para que o usuário rapidamente identificasse um site guardado em seus favoritos, hoje em dia, os navegadores mais modernos exibem elas na barra de endereços.

Como colocar um favicon sem seu site

Conforme já citado, o padrão utilizado são imagens 16X16 no formato .ico que é suportado pela maioria dos navegadores.

A maneira mais prática de converter a imagem para .ICO é através do site www.html-kit.com/favicon. Tudo o que você tem a fazer é clicar em “Selecionar Arquivo”, fazer o upload da imagem a ser convertida e finalmente clicar em “Generate Favicon.ico”.

Outra opção para criar seu favicon online é o site www.favicon.cc. Neste site para realizar a conversão/criação clique em “Selecionar Arquivo”, selecione o arquivo a ser convertido e em seguida clique em “Upload”.

A opção “Keep dimensions” reduz o tamanho da imagem em alterar sua proporção, já “Shrink to square icon” redimensiona a imagem de forma que ela ocupe todo o espaço 16×16.

Pronto, já tenho meu favicon. E agora?

No caso de sites com servidor próprio você deve enviar o arquivo convertido para a raiz do mesmo que é geralmente a pasta “public html” ou “www” e logo em seguida inserir o seguinte código no topo do código fonte de suas páginas, logo abaixo do título delas:

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

Se você é usuário de serviços que não permitem enviar a imagem para o servidor, você pode hospedá-la em outro lugar e especificá-la da seguinte maneira:

<link rel="shortcut icon" href="endereço-da-imagem.com.br" />

Logicamente que endereço-da-imagem.com.br você deve substituir pelo endereço de onde está hospedado seu favicon.

Não tenho onde hospedar o arquivo .ico. E agora?

Se você não tem onde hospedar o arquivo convertido, então, a melhor opção para você é escolher uma imagem bonita desta galeria, pegar o código ao final dela e colar no cabeçalho do seu site.

Favicon no blogger

Antigamente era preciso fazer uma gambiarra para que isso funcionasse no blogger/blogspot. Felizmente há pouco tempo o Google adicionou novas funcionalidades ao Blogger. Dentre elas a que permite a troca do favicon. Para tanto, clique em “Elementos da página-> Favicon-> Editar-> Selecionar arquivo”. Escolha a imagem desejada e clique em “Concluir”.

Favicon animado

A imagem deve estar no formato .GIF, o código é o seguinte:

<link rel="shortcut icon" href="http://endereço-da-imagem.com" type="image/x-icon"/>

<link rel="icon" href="http://endereço-da-imagem.com" type="image/x-icon"/>

Substitua endereço-da-imagem.com pelo endereço de onde sua imagem está hospedada. Pode ser até mesmo no Tinypic, Imageshack etc.

Categoria(s): Imagens