Como animar um favicon?

Question

Como animar um favicon assim?

Parece que funciona apenas no Firefox.

Answer 1

Embora seja atualmente suportado apenas pelo Firefox outros navegadores, esperamos apoiá-lo no futuro. Para conseguir o efeito, você precisa fazer o upload do gif para o servidor e, em seguida, adicione a linha a seguir para a seção head da sua página:

<link rel="icon" href="animated_favicon.gif" type="image/gif" >

Dê uma olhada AnimatedFavIcon.com por ajuda e recursos adicionais.

Answer 2

Quase certamente não o que você está procurando, mas algumas pessoas têm ido tão longe como para programaticamente gravação para o favicon no lado do cliente JavaScript. A URL a seguir mostra o velho videogame jogo 'Defender' no favicon:

http://www.p01.org/defender_of_the_favicon/

Isso funciona no Firefox, Opera e Safari, mas não em, pelo menos, versões mais antigas do IE. Eu não tenho certeza do que o último IE pode ser capaz de fazer.

Fazer um 'view source' on this page faz para muito uma leitura interessante.

Answer 3

Firefox

O Firefox suporta animado favicons. Basta adicionar um link para o GIF em tag <link rel="icon">:

<link rel="icon" href="/favicon.gif">

Você também pode usar o arquivo ICO animado. Neste caso, os navegadores que não suportam favicons animados irá mostrar somente o primeiro quadro.

Outros navegadores

Em outros navegadores, você pode animar um favicon usando JavaScript. Você apenas tem que extrair quadros individuais do GIF e mudança <link rel="favicon"> src cada vez que o quadro GIF mudanças. Veja este código, por exemplo ( JS Fiddle demonstração ):

var $parent = document.createElement("div")
    $gif = document.createElement("img")
   ,$favicon = document.createElement("link")

// Required for CORS
$gif.crossOrigin = "anonymous"

$gif.src = "https://i.imgur.com/v0oxdQ8.gif"

$favicon.rel = "icon"

// JS Fiddle always displays the result in an <iframe>,
// so we have to add the favicon to the parent window
window.parent.document.head.appendChild($favicon)

// libgif.js requires the GIF <img> tag to have a parent
$parent.appendChild($gif)

var supergif = new SuperGif({gif: $gif})
   ,$canvas

supergif.load(()=> {
  $canvas = supergif.get_canvas()
  updateFavicon()
})

function updateFavicon() {
  $favicon.href = $canvas.toDataURL()
  window.requestAnimationFrame(updateFavicon)
}

_{Eu costumava libgif.js para extrair os quadros GIF.}

Infelizmente, a animação não é muito suave no Chrome. No Firefox ele funciona muito bem, mas o Firefox já suporta favicons GIF.

Confira também biblioteca favico.js .

Veja também

• Como adicionar um ícone aba do navegador (favicon) para um site?
• Mudando site favicon dinamicamente

Answer 4

Existem repos sobre GitHub demonstrando como fazer isso.

http://lab.ejci.net/favico.js/example- simples /

Essencialmente eles desenhar na tela e, em seguida, fazer canvas.toDataURL('image/png') e defina a href <link> para que os dados-url.

Answer 5

Eu criei um href="https://github.com/jcubic/favloader" rel="nofollow biblioteca para animar favicon , o padrão é carregador de animação (é gerado pela lona ), mas também suporta animação gif para o navegador que fazer gif não suporte fora da caixa (a partir da versão 0.3.0).

API é simples

favloader.init({
    color: 'red'
});

favloader.start();
favloader.stop();

Versão 0.4.0 terá função de retorno que irá gerar um quadro de algo como:

favloader.init({
   frame: function(ctx /* canvas context 2D */) {
   }
});

e o usuário será capaz de desenhar único quadro

NOTA: As coisas para considerar se você deseja implementar algo como isto:

• Para animar quando o separador não está ativo trabalhador uso da web,
• Não uso requestAnimationFrame, porque parar a execução em MacOSX / Chrome mesmo no trabalhador web.

Answer 6

Para animar o favicon para navegadores todos muito mais bonitas, a seguir trabalhou para mim:

1. Fazer download de uma imagem de cada quadro do gif.

2. Fazer a ligação a primeira imagem como um ícone com um id:

   <link rel="icon" type="image/png" href="/image1.png" id="icon"/>  
   

3. Crie uma função de loop, eo uso setTimeout() para cada imagem. Os tempos são variáveis ??e pode ser ajustado para por mais rápido que você gostaria a animação. Aqui está um exemplo:

   function iconChange() {
   setTimeout(function(){ document.getElementById("icon").href = "/image1.png";}, 333);
   setTimeout(function(){ document.getElementById("icon").href = "/image2.png";}, 667);
   setTimeout(function(){ document.getElementById("icon").href = "/image.png";}, 1000);  
   }
   

4. Criar um loop quando as cargas janela:

   window.onload = function() {
   setInterval(function() {
   iconChange();
   }, 250);
   };
   

Este método apenas ajuda a garantir que mais navegadores pode ver a animação, porque outros métodos só funcionam em determinados navegadores e versões do navegador.