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 (Logaster é um ótimo serviço online para criar Favicon, conheça!)
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 “<head>”.
;
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 “<head>” 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.