FavIcons: ícones personalizados na barra de endereço

Saudações pessoal.

Essa semana foi bem corrida, e não deu tempo de atualizar o blog. Além disso, to com uma “postagem” bacana para publicar aqui, mas o pessoal da hospedagem não está colaborando muito.. : ( Infelizmente, eu tenho essa mania de não somente falar sobre as coisas que acho legais, mais mostrar exemplos funcionando.. E é aí que a hospedagem está me enrolando.. hehe. Mas vamos ao post de hoje então.

Esse blog tem um íconezinho personalizado, que fica aparecendo no seu navegador, no seu favoritos (caso você tenha adicionado o blog como favorito) e na barra de tarefas, quando você minimiza a janela do navegador.

Esse iconezinho é chamado de FavIcon (uma abreviação de Favorites Icon, pois sua principal função, no início, era fornecer um ícone para o seu site quando listado nos favoritos do navegador). Também conhecido como Website icon, Shortcut icon, Url icon e Bookmark icon, nada mais é do que uma imagem de 16×16, 32×32 ou 64×64 pixels (mas até hoje, só utilizei de 16×16).

Inicialmente, o formato utilizado para essa imagem era o ICO, mas hoje os navegadores (a maioria deles) já aceitam vários formatos, como PNG, GIF e JPG (muito em breve, o firefox deverá suportar o SVG também, não testei, mas talvez já até suporte).

Para colocar um ícone desses no seu site, primeiro, basta criar um. Para isso, existe um excelente site, o FavIcon.cc. Nele você pode criar o seu ícone online, na própria página, inclusive criando ícones animados, e depois baixá-los. Esse que estou utilizando, (bem horrivelzinho por sinal), eu fiz lá.. mas tá horrivelzinho por causa das minhas habilidades artísticas serem limitadas.. ;) Além disso, o site permite importar imagens normais (grandes), e ele próprio faz um ícone baseando-se nelas. Permite ainda que você publique o seu ícone, ou que veja vários ícones que foram criados e publicados por outros usuários.

Criando um FavIcon
Criando um FavIcon

Depois criado o seu ícone, basta colocá-lo em alguma pasta do seu servidor, onde está localizado o seu site. No meu caso, o meu favicon foi colocado no seguinte endereço: http://blog.interpossi.com.br/wp-content/themes/arras-theme/images/favicon.ico

Com esse endereço em mãos, você deve incluir uma tag LINK entre as tags <head> e </head> do seu site, com o seguinte formato:
<link rel="shortcut icon" type="image/x-icon" href="CAMINHO_PARA_O_SEU_ARQUIVO_DE_ICONE" />

Novamente, no meu caso, utilizando o caminho que eu citei acima, ficaria assim:
<link rel="shortcut icon" type="image/x-icon" href="http://blog.interpossi.com.br/wp-content/themes/arras-theme/images/favicon.ico" />

E pronto!

Existem alguns detalhes sobre formatos, brigas entre a W3C e a Microsoft, etc.. Se vocês quiserem saber um pouco mais sobre isso, basta acessar o artigo da Wikipedia sobre FavIcons.

Mas só lembrando que o jeito que disse acima é o jeito mais “antigo” de se fazer isso, e sempre funcionou pra mim na prática, por isso não me preocupei em “seguir a cartilha da W3C”, que ainda não é aceita por todos os navegadores (ainda!)  ;)

type=”image/x-icon”

Sobre maverick