Favicon gif no Firefox e IE


Já que o uninuni tá crescendo achei que era hora de colocar um favicon nele, que nada mais é do que uma imagem que aparece do lado da url no navegador e como ícone nos favoritos.

Favicon UninuniComo somos vários integrantes e o espaço da imagem é pequeno então eu resolvi criar um gif animado que foi feito no Photoshop pegando a imagem de cada integrante, fazendo ela ficar quadrada, salvando ela como gif em 16 cores, diminuindo para 64×64 e depois criando a transição entre cada personagem (várias imagens que mostram um personagem sumindo e outro aparecendo) que resultou num total de 85 imagens criadas uma a uma, que foram importadas pelo Adobe ImageReady para compor o gif animado, sendo que a imagem principal dos personagens fica estática por 3 segundos cada e as outras 80 duram 0,05 segundos cada.

O problema é que o Firefox aceita um gif animado como favicon, mas o IE (Internet Explorer) não. Então eu peguei um dos personagens, já em 16 cores e tamanho 64×64 e salvei como .ico, que é o formato padrão do favicon. Para salvar como .ico com o Photoshop é preciso baixar o plugin aqui e copiá-lo para a pasta de plugins do Photoshop, no meu caso C:Arquivos de programasAdobePhotoshop 7.0Plug-Ins e reiniciar o Photoshop.

Por último tem que saber qual o navegador que está acessando o site para escolher se vai mostrar o gif animado (Firefox) ou o arquivo ico (IE), para isso eu adicionei o seguinte código no tema do meu wordpress:

<head>
<script language=”JavaScript”>
var ua      = navigator.userAgent.toLowerCase();
var isOpera = ua.indexOf(“opera”) > -1;
var isIE    = !isOpera && ua.indexOf(“msie”) > -1;

if (isIE) {
document.write(“<link href=”http://uninuni.com/favicon.ico” “+
“type=’image/x-icon’ rel=’shortcut icon’/>”);
document.write(“<link href=”http://uninuni.com/favicon.ico” “+
“type=’image/x-icon’ rel=’icon’/>”);
} else {
document.write(“<link href=”http://uninuni.com/wordpress/wp-content/uploads/2007/11/favicon.gif” “+
“type=’image/gif’ rel=’shortcut icon’/>”);
document.write(“<link href=”http://uninuni.com/wordpress/wp-content/uploads/2007/11/favicon.gif” “+
“type=’image/gif’ rel=’icon’/>”);
}
</script>
</head>

Carregando comentários...


1 comentários antigos