Qualquer site que se preze possui um favicon, abreviação do inglês favorites icon, ou ícone dos favoritos, que nada mais é do que uma imagem (ou ícone) associada a um site. Criar um favicon é fácil. Por isso é interessante colocar o favicon de um site junto com o seu link. Muitos serviços já fazem isso, como o Google Profile, que exibe os favicons dos links associados ao perfil.
Métodos para inserir um favicon
O significado original da definição de um favicon surgiu com o Internet Explorer 4 e consistia em colocar um arquivo chamado favicon.ico no diretório raíz do servidor web. Assim, automaticamente o navegador pegaria esse ícone e usaria na exibição dos favoritos. Os navegadores atuais suportam qualquer outro formato de imagem além do formato ICO do Windows.
Como não existe um método padrão para incluir uma imagem em uma página como um favicon, muitos programadores utilizam mais de um método ao mesmo tempo. São basicamente três maneiras:
- Usar a meta tag <link rel="icon" type="image/png" href="http://exemplo.com.br/icone.png"> no cabeçalho da página. Esse é o método recomendado pela W3C.
- Usar a meta tag <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" /> no cabeçalho da página. Esse é o método mais usado e é reconhecido pela maioria dos navegadores.
- Colocar o favicon como um arquivo chamado favicon.ico no diretório raíz da página. Todos os navegadores suportam esse método por razões de compatibilidade, mas é o menos flexível.
Jeito Google de ser
Por falta de um padrão, não existe uma forma fácil de se exibir o favicon de qualquer site. O falecido serviço Google Shared Stuff (S2) não existe mais, mas deixou uma herança: uma URL que permite recuperar o favicon dos sites. A URL retorna uma imagem no formato PNG com tamanho 16x16 e que pode ser exibida via HTML usando a tag img, no seguinte formato:
http://www.google.com/s2/favicons?domain=[url]
Onde [url] deve ser substituído pela URL do site do qual se deseja pegar o favicon. Por exemplo, veja o seguinte código HTML:
<img src="http://www.google.com/s2/favicons?domain=g1.com.br" height="16" width="16" />
O resultado visto no navegador será a seguinte imagem:
Mas existe um problema (Google fail) nessa URL do Google: ela só funciona quando o nome do arquivo for favicon.ico. Mas muitos sites utilizam outros métodos para inserir o favicon. Então, quando a URL do Google não acha o arquivo favicon.ico, ela exibe uma imagem GIF do planeta Terra. Por exemplo, o site www.md.utfpr.edu.br não possui um arquivo chamado favicon.ico na sua raíz, então a seguinte imagem será exibida: . Passando o parâmetro &alt=feed junto com a URL, será exibida a imagem padrão dos feeds RSS caso não seja encontrado o favicon. Por exemplo, a URL http://s2.googleusercontent.com/s2/favicons?domain=www.md.utfpr.edu.br&alt=feed retorna a seguinte imagem:
Apesar de não ser o melhor, muitos projetos utilizam essa URL. Você pode testar o serviço aqui, colocando a URL de um site (ex.: cleber.net.br)
getfavicon.org
O site getfavicon.org possui um serviço melhorado. Ele lista todos os métodos usados em um site para inserir um favicon e permite várias configurações de exibição, usando a seguinte URL:
http://www.getfavicon.org/?url=[url]/[nome].[extensao]
Onde:
- [url]: a URL do site do site do qual se deseja pegar o favicon
- [nome]: um nome qualquer para o arquivo
- [extensao]: formato da imagem que será gerada. Pode ser png, gif, jpg ou ico.
A imagem gerada possui resolução padrão de 16x16. É possível definir uma resolução para a imagem, usando a URL http://www.getfavicon.org/?url=[url]/[nome].[resolucao].[extensao], onde [resolução] deve ser substituído pelo valor (no máximo 128).
Você pode testar o serviço aqui, colocando a URL de um site (ex.: cleber.net.br).
Veja alguns exemplos:
Lista de favicons para do site cleber.net.br
getfavicon.appspot.com
Esse site, construído usando o Google App Engine, é o mais inteligente. Ele recupera o favicon fazendo uma busca também na tag link do cabeçalho. A URL deve ser usada no seguinte formato:
http://getfavicon.appspot.com/[url]
Onde [url] é a URL completa do site, incluindo os protocolos HTTP ou HTTPS. Por exemplo, o favicon do site www.md.utfpr.edu.br, que nos serviços anteriores não era encontrado, pode ser exibido usando a URL http://getfavicon.appspot.com/http://www.md.utfpr.edu.br.
Veja o favicon:
Você pode testar o serviço aqui, colocando a URL completa de um site (ex.: http://cleber.net.br).
Delicious
Digg
Facebook
Google
Yahoo
Technorati
Uma técnica muito utilizada em websites e sistemas web para diminuir o tráfego de banda e otimizar o desempenho é o CSS Sprite. A técnica consiste em juntar várias imagens em uma imagem só e utilizar os recursos do CSS para definir qual imagem será exibida. O tráfego de banda é menor por que ao invés de várias requisições para o servidor o navegador faz uma requisição apenas. Além disso, com menos requisições simultâneas, a página carrega mais rápido.
Durante o governo de George Bush, o 
