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 programas\Adobe\Photoshop 7.0\Plug-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/favicon.gif\” “+
                     “type=’image/gif’ rel=’shortcut icon’/>”);
      document.write(“<link href=\”http://uninuni.com/favicon.gif\” “+
                     “type=’image/gif’ rel=’icon’/>”);
    }
  </script>
</head>

Utilidades Badger, 06 de novembro 1 comentário