Fazendo Arte Bahia: Colocando um FAVICON em seu blog

Colocando um FAVICON em seu blog

Terça-feira, Outubro 12, 2010

Hoje acordei cedo, principalmente por ser dia das crianças (pra fazer uma surpresinha pra meu filhote) e resolvi fazer algumas coisas que faltava em meu blog também, que estou reformulando. Então lembrei do FAVICON e fui ler algumas coisas que eu tinha escrito sobre isso em meus arquivos pessoais. Lendo também algumas coisas novas sobre esse assunto em sites diversos, me deparei em muitas dificuldades, a começar sobre como hospedar o arquivo *.ICO, que é o formato oficial do arquivo que gera o FAVICON. Então resolvi criar meu próprio tutorial e disponibilizar aqui pra vocês.

Pra quem não sabe, um FAVICON (abreviação de 'favorite icon'), é um pequeno arquivo de formato *.ICO (pode ser outros também, como veremos), de tamanho 16x16 pixels que fica guardado em um site para visualização em um navegador. São visualizados nas abas e na barra de endereço na maioria dos navegadores mais comuns (explorer, firefox, opera, chrome).

COMO SÃO VISUALIZADOS NOS NAVEGADORES

1 - INTERNET EXPLORER e OPERA: Suporta apenas o formato *.ICO.

2 - FIREFOX e CHROME: Além do formato oficial *.ICO, suporta ainda os formatos PNG, GIF e JPG.

CONSTRUINDO UM FAVICON

1 - PELO PHOTOSHOP: Primeiro temos que baixar o Plug-in do formato *.ICO, pois apesar do photoshop ser um programa complexo, não salva esse tipo de extensão. Então, pra obter a extensão, baixe-o clicando AQUI. O arquivo é pra quem usa o WINDOWS e eu só testei no photoshop. Mas você também pode fazer um procedimento parecido com o Paint Shop Pro e com o Corel Photo-Paint, teste fazendo o procedimento parecido com o que estou ensinando aqui. Quem sabe não dá certo também... Para instalar o Plug-in, basta selecionar o arquivo ICOFormat.8bi e copiá-lo dentro da pasta que está em *SUA UNIDADE DE DISCO/Arquivos de Programas/Adobe/SUA VERSÃO PHOTOSHOP/Plug-Ins/File Formats. Após isto, reinicie seu photoshop para efetuar a instalação completa do plug-in. Depois, crie uma imagem de 16x16 pixels, RGB e fundo branco. Vá em SALVAR COMO e escolha a opção ICO:

2 - USANDO UM SERVIÇO ONLINE: Você pode criar seu FAVICON diretamente pelo site FAVICON GENERATOR TOOL, apenas escolhendo uma imagem JPG ou PNG de até 100KB. Após clicar em UPLOAD, clique em cima da palavra DOWNLOAD com o botão direito e salve seu arquivo. Esse procedimento te dará um arquivo 16x16 pixels em formato *.ICO. Mas você também pode gerar um FAVICON ANIMADO, indo diretamente ao site FAVICON FROM PICS, onde de forma simples você pode criar seu FAVICON. Você ainda pode colocar um texto na construção, como eu fiz com o meu favicon:

Lembrando que esse tipo de FAVICON só funciona no FIREFOX e no CHROME, pois o arquivo gerado é um arquivo GIF.

HOSPEDANDO SEUS ARQUIVOS GERADOS

1 - FAVICON em formato *.ICO : Infelizmente são poucos os sites que hospedam esse tipo de arquivo com esta extensão. Demorei um pouco pra achar um simples e que realmente funcionasse. Então, depois de muito procurar, escolhi o PICTURE STACK, pois dá pra colocar sua imagem e pegar o link direitinho.

2 - FAVICON em formato GIF, PNG ou JPG: Vários são os sites que hospedam imagem. Um dos que eu mais gosto é o IMAGESHACK. Lá você pode hospedar seus arquivos e pegar o link. Aconselho a fazer o registro, pois você pode administrar os arquivos sempre que precisar.

COLOCANDO SEU FAVICON NO BLOGGER

Como eu já tinha falado, você pode construir dois tipos de FAVICON pra colocar em seu blog (um em *.ICO e o outro em GIF). E é bom você construir os dois mesmo. Então, o que fazer pra colocar o FAVICON em seu blog? Vamos ver isso agora:

1 - Abra seu blogger e no painel de controle vá em LAYOUT e depois em EDITAR HTML, como mostra a figura abaixo: