Ícones, Ícones com Fundo Transparente, Ícones Animados: FAVICON
Postado por ken adams em 6 de Março de 2008Favicon é 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:
- Criar um arquivo com extensão .ico
- Fazer o upload do arquivo em algum servidor
- 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:
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…