Como colocar a logo do seu site na barra de endereço do navegador (Favicon)

Muitos sites na internet ao serem acessados adicionam um ícone com a logo da empresa na barra de endereços do navegador. Este ícone é denominado de Favicon.

Segundo o Wikipédia, favicon é um termo derivado de “favorite” e “icon” e nada mais é do que uma pequena imagem no formato “ico” com cerca de 16 x 16 pixels, que fica guardada na raiz de um site para visualização pelo navegador.

Alguns navegadores como o Internet Explorer até a versão 6, só exibem os favicons quando um site é adcionado aos favoritos. Em outros, como o Firefox, Opera e Internet Explorer, a partir da versão 7, os favicons são visualizados na barra de endereços e também nas abas.

Veja, abaixo, como inserir um favicon no seu site:

1- Crie um novo arquivo, quadrado, no Photoshop ou no editor de imagens de sua preferência.

2- Insira a logo do seu site ou a imagem que você deseja que apareça na barra de endereços do seu browser.

Nota: O favicon deve conter uma imagem simples, pois devido ao seu tamanho reduzido, imagens complexas, cheias de detalhes, viram um borrão. O ideal é colocar a logo do seu site ou apenas parte da logo.

3- Depois de compor a imagem do seu favicon, redimencione o arquivo para 16 x16 pixels e salve-o com o nome de “favicon.gif”

4- Agora, é necessário converter o arquivo “gif” em um arquivo “ico”, para isso existem vários softwares gratuitos na internet, como o Simplyicon.

5- Depois de salvar o arquivo “favicon.ico” coloque-o na raiz do seu site no servidor.

6- Para inserir o favicon no seu site, você deve editar o código HTML das páginas acrescentando a linha de código abaixo dentro da tag “”.

O Firefox e o Chrome também suportam imagens nos formatos “gif”, “png” e “jpg”, com isso é possível criar favicons diferentes para esses navegadores. Para isso, insira a linha de código abaixo dentro da tag “” do seu site logo após a linha de código que mostramos anteriormente:

Se for uma imagem “png”, substitua o texto “image/gif” por “image/png” e se for “jpg” por “image/jpg”.

Após configurar o favicon do seu site, é necessário limpar o cache do navegador para visualizá-lo.

Se você não definir um favicon para o seu site, o navegador exibirá o favicon padrão.

Fonte: 72DPI