Favicon é a junção dos termos em inglês Favorite Icon, que em português ficaria algo como Ícones dos Favoritos. Na prática, é aquele iconezinho que fica do lado esquerdo da URL, no campo de endereços do navegador.

Para gerar um favicon você deve, basicamente, seguir esses passos:

  1. Criar um arquivo com extensão .ico
  2. Fazer o upload do arquivo em algum servidor
  3. Inserir a tag especifica na página web onde você quer mostrar seu ícone

1. Criando arquivo .ico

Os Favicons tem dimensões 16×16 pixels. Existe, basicamente, dois jeitos de criar um Favicon. O primeiro, a partir de softwares específicos de criação de ícones, sendo o mais famoso o Microangelo. Os programas de edição de imagens como o Adobe Photoshop e o Fireworks não criam esse tipo de arquivo.

O segundo jeito é criar uma imagem em qualquer programa de edição de imagens e usar ferramentas online para convertê-los para o formato certo. Recomendo dois ótimos Favicon Generator:

www.html-kit.com/favicon

Nessa primeira ferramenta, você tem a possibilidade de criar um Favicon Animado automaticamente (os favicons animados só podem ser visualizados no navegador Firefox, e eles, na verdade, são gifs animados com as dimensões 16×16 pixels).

tools.dynamicdrive.com/favicon

No Favicon Generator do Dynamic Drive (link acima), você tem a possibilidade de mesclar ícones para desktop (32×32 pixels, 48×48 pixels) no mesmo arquivo .ico gerado.

» Ícones com Fundo Transparente

Para criar favicons com fundo transparente é só criar um arquivo png ou gif com fundo transparente e enviá-los para essas ferramentas.

» Ícones Animados

Ícones animados podem ser criados no Adobe Fireworks ou Adobe Flash, depois exportados para o formato animated gif (não esqueça que as imagens devem ter dimensões 16×16 pixels). Nesse caso, não é necessários convertê-los para o formato .ico através dessas ferramentas.

2. Fazendo o Upload do Arquivo

Se você não tem onde hospedar o ícone que você criou com tanto carinho, coloque-o em algum servidor gratuito, como o Brinkster. Os sites de hospedagem de imagens como o Imageshack e o Photobucket não aceitam arquivos com essa extensão.

3. Inserindo a Tag no Código da sua Página

<link rel="shortcut icon" href="http://www.seudominio.com.br/favicon.ico" type="image/x-icon" />

Insira a tag acima no seu código, entre as tags <head>. No href (entre as aspas) coloque o caminho certo onde está seu arquivo .ico, inclusive o nome do arquivo e formato.

<link rel="icon" href="http://www.seudominio.com.br/animated-favicon.gif" type="image/gif" />

Ou a tag acima para favicons animados (lembre-se: só será renderizado no Firefox). No caso, você pode colocar os dois. Assim se o usuário estiver usando um outro navegador que não seja o Firefox, o favicon tradicional será mostrado.

Pronto! É só!!! Have Fun…