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:
https://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="https://www.google.com/s2/favicons?domain=g1.com.br" title="Favicon do 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 example.com 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=example.com&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)