Truques & Dicas

Como construir Favicons Animados…

20 Comentários

Seguindo a sugestão do nosso leitor BlinZk, decidi então pesquisar sobre os favicons animados que ainda existem em muito pequena quantidade por este imenso mundo da Internet.

Muitos se estão a perguntar: O que raio são favicons?

Um favicon (diminutivo de favorites icon) é aquele icon de 16×16 pixeis que aparece na barra do vosso browser, associado com o website que estão a visitar. Por exemplo no Peopleware aparece um “P”, no Google um “G”, na Sapo um sapo, etc.

É costume estes ícones serem estáticos, mas é possível torná-los animados, para dar algum dinamismo e maior flexibilidade de comunicação de informação ao favicon.

Um dos muitos sites que oferecem um serviço de tornar uma imagem num favicon animado é o AnimatedFavicon.

Basta escolhermos uma imagem (escolhi a do actual favicon do Peopleware) e opcionalmente um texto para “rolar” com a imagem.

Podemos agora fazer download de um .zip que inclui o favicon.ico que contém o favicon estático e o animated_gif.gif que contém o favicon animado.

Agora, tal como está explicado no site, basta fazer upload para o site e colocar o seguinte código HTML entre as tags e do vosso site:

E passam a ter um favicon animado.

NOTA: Se já tinham um favicon no vosso site, terão de limpar a cache do vosso browser antes que possam ver o novo favicon.

Se não têm nenhum favicon, podem desenhar o vosso próprio ou então recorrer a sites como por exemplo http://www.freefavicon.com/ e utilizar um ou mais dos que disponibilizam para download, sendo que também é possível criar favicons animados lá.

Espero que tenha sido útil. Alguma dúvida, comentem.

Podem sugerir artigos e/ou tutoriais sempre que quiserem, ou até escrever e enviar para o Peopleware para serem publicados.

Autor: Pplware
Partilhar:
Também pode gostar

Comentários

20

Deixe um comentário

O seu endereço de email não será publicado. Campos obrigatórios marcados com *

  1. Avatar de David Branco

    Eu já fiz uns quantos para serem animados mesmo, é muito porreiro e tal mas só alguns browsers os reconhecem pois ficam com a extensão gif em vez de ico. Ainda mão exprimentei o acima para ver como fica, mas pelo que li na página fica em .gif também.
    Costumo usar outro site que podemos por 2 imagens a alternar ou também a opção de texto. Pode ser até só uma imagem mas a rodar ou a aumentar, etc.
    Estou no trabalho e não tenho aqui o link para o site, em casa já vai directo, mas mais logo deixo aqui o contributo.

    http://www.ptblog.info

  2. Avatar de BESTCINE
    BESTCINE

    Que-me cá parecer que no IE7 isto não vai funcionar!! Se alguém já experimentou que diga por favor.

    Obrigado,

    ———–

    http://www.best-cine.com/

  3. Avatar de Luís

    Não percebo onde se coloca o HTML…. Podem responder a esta duvida?

  4. Avatar de David Branco

    Luís é a seguir ao primeiro “”

  5. Avatar de David Branco

    Bem o comando html não apareceu no comentário anterior. Estava a dizer que é a seguir ao primeiro “”. Caso não apareça é a seguir ao primeiro head dentro de .

  6. Avatar de David Branco

    primeiro “head”, o resto isto assume como html e não aparece mas pronto é no cabeçalho 🙂

  7. Avatar de upvalencia.blogspot.com

    Nao consigo encontrar onde se coloca o codigo html…………

  8. Avatar de Almada
    Almada

    mais uma porcaria, que não serve de nada

  9. Avatar de David Branco

    No IE os favicon animados não funcionam, só no firefox, bem como os que têm extensão .png
    @Almada pelo menos serve para teres os teus favoritos organizados e olhando para a imagem identificas logo o site em vez de teres de ler a descrição toda pois têm todos a imagem default…

    @upvalencia O código html coloca-se em todas as páginas do site no cabeçalho ou seja entre as tags head

  10. Avatar de Luís

    Ok. Muito obrigado!!!

  11. Avatar de carlos rajas
    carlos rajas

    Excelente tuto, parabens ao Bruno Bernardino. É de se esperar muitos mais destes. keep it up ! 🙂

    ———————————————-
    http://www.delaorden9.com
    ha muito tempo……a long time ago…..

  12. Avatar de Miguel Ferreira

    Não devias ter feito este post, favicons animados é das cenas mais irrtantes que há 😀

    http://www.jogosecharadas.com

    1. Avatar de adaor

      Tb tu deverias nos poupar deste teu comentario de pouca sabedoria.

  13. Avatar de João

    O meu é uma cegonha e funciona bem.
    Parabéns ao pessoal do Pplware, pelo excelente trabalho que vem realizando.

    Saudações alentejanas.

  14. Avatar de Blizard

    Bom post… mas acho que isto de pouco serve 🙂

    http://truquestelemoveis.blogspot.com/

  15. Avatar de BlinZk
    BlinZk

    Bom post! 😉

  16. Avatar de Vítor M.

    BlinZk clap clap clap…. simples mas interessante para quem quer dar mais movimento a esse importante ícone dos sites.

    Se mais houver… venham mais.

  17. Avatar de Karlus
    Karlus

    E assim foi como desapareceu o vosso Favicon aqui no meu IE… Agora está explicado.
    Mas uma coisa que os webmasters devem ter sempre em atenção é que, os sites devem ser feitos a pensar na maioria dos browsers. Certo? Então voltem a colocar o vosso Favicon que eu gostava tanto e deixem-se lá de animações 😉

  18. Avatar de Aléxis
    Aléxis

    Epa caso não saibam podem por o gif animado como favicon e podem por o não animado também, o browser que utilizarem vai escolher o favicon que quer utilizar… Não uso muito favicon’s animados mas de vez em quando sim, tudo depende, se der jeito por algo animado (dependendo do favicon), se queremos passar alguma informação a mais ou se queremos algo com mais animação e interacção…

    Todos os sites onde tenho um favicon animado tenho tb um não animado e por exemplo no ie aparece o não animado e no firefox aparece o animado…

    Não abusem é das animações, as animações tem de ser utilizadas quando necessário e não sempre só porque dá para fazer uma animação…

    Cumps a todos