Colocando um ícone na barra de endereços

Alguns sites exibem um ícone personalizado na barra de endereço. Esse ícone é chamado favicon (favorite icon), pois ele também é copiado para a lista de favoritos. Na realidade este é um ícone comum, no padrão .ICO do Windows, com tamanho de 16x16 ou 32x32, que é usado há mais de 10 anos. Eu próprio fazia ícones no Visual C para programas Windows, mas já nem lembrava que isso existia. Os ícones também podem ser abertos pelo Paint do Windows e editado. Estranhamente não é possivel usar o Paint para salvar um novo arquivo .ico. Mas programas para isso não faltam. Melhor ainda, alguns sites como o

http://www.html-kit.com/favicon/

permitem que se crie um arquivo ICO com base em qualquer imagem. Quem quiser pode ainda obter o link pronto, como em

http://www.bluejar.com/20-free-favicon-icon-sets/

O passo seguinte é a hospedagem do ícone. Isso é imediato para quem tem seu próprio servidor ou um serviço de hosting padrão. Mas os serviços gratuitos como o blogger.com não permitem hospedagem deste tipo de arquivo. Tentei o Google Pages e o Microsoft Live, que permitem o upload mas não funciona, pois o primeiro parece que converte o arquivo e o segundo gera um link dinâmico. Por fim achei o site

http://www.iconj.com/

Embora por questões didáticas este seja o passo 2, a verdade a hospedagem foi a última coisa que faltou para por o favicon em funcionamento. Este ICONJ foi uma mão na roda. O engraçado é que é uma "versão beta", seguindo a moda do Google. Será que se eu chamar tudo que faço de "versão beta" será um sucesso? Mas continuando com a parte prática. Por exemplo, usei o site ICONJ acima e fiz o upload do ícone, que gera a URL do arquivo hospedado:

http://www.iconj.com/ico/8/8lqhbd01mn.ico

Na realidade este site já gera todo o código HTML a ser inserido. Separei a URL apenas para mostrar como seria no caso mais comum. Caso seja o seu webserver ou o seu serviço de hosting, o arquivo vai estar em um diretório do próprio webserver.
A seguir basta editar o código da página, colocando o seguinte código na seção HEAD:

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

substituindo-se a parte do href pela URL verdadeira do ícone. Na URL anterior ficaria:

< link rel="shortcut icon" href="http://www.iconj.com/ico/q/q3q4uy6ykq.ico" />

E por fim o teste. Aqui tive alguns problemas, que me fizeram inclusive baixar e instalar o Firefox. De fato, o IE 7 tem uma dificuldade com o cache. Com isso não estava conseguindo mostrar o favicon nem o html e o ícone locais, o que me fez suspeitar do arquivo .ico. No IE é necessário de alguma forma eliminar o cache, apagando os arquivos temporários e o histórico, e depois reinicializando o Browser. Só que eu relutei em fazer isso pois estava com uma meia dúzia de janelas do IE fazendo pesquisas... Sim, parece que tem que fechar todas. Só abrir uma nova instância não adiantou. O Firefox resolveu esta dúvida, e foi mais fácil instalar o Firefox do que sair de todos os sites...