Come animare una favicon?

Question

Come per animare una favicon del genere?

Sembra funzionare solo in Firefox.

Answer 1

Mentre è attualmente supportato solo da altri browser FireFox, si spera, sostenere in futuro. Per ottenere l'effetto, è necessario caricare il GIF sul server e quindi aggiungere la riga in basso alla sezione head della pagina:

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

Date un'occhiata a AnimatedFavIcon.com aiuto e risorse aggiuntive.

Answer 2

Quasi certamente non è quello che stai cercando, ma alcune persone sono andate al punto di scrivere programatically per la favicon in JavaScript lato client. Il seguente URL mostra il vecchio videogioco di gioco 'Defender' nella favicon:

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

Questo funziona in Firefox, Opera e Safari, ma non nelle versioni precedenti di almeno IE. Non sono sicuro di quello che l'ultima IE potrebbe essere in grado di.

Fare un 'vista origine' in questa pagina fa per una lettura interessante abbastanza.

Answer 3

Firefox

Firefox supporta favicon animate. Basta aggiungere un link al GIF in tag <link rel="icon">:

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

È inoltre possibile utilizzare file ICO animato. In questo caso i browser che non supporta favicons animati visualizzerà solo il primo fotogramma.

Altri browser

In altri browser è possibile animare una favicon usando JavaScript. Non vi resta che estrarre singoli fotogrammi dal GIF e cambiare <link rel="favicon"> src ogni volta che cambia il telaio GIF. Vedere questo codice per esempio ( JS Fiddle demo ):

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)
}

_{ho usato libgif.js per estrarre fotogrammi GIF.}

Purtroppo, l'animazione non è molto liscia in Chrome. In Firefox funziona benissimo, ma Firefox supporta già favicon GIF.

Scopri anche favico.js biblioteca.

Vedere anche

• Come aggiungere l'icona di scheda del browser (favicon) per un sito web?
• Modifica sito favicon in modo dinamico

Answer 4

Ci sono i pronti contro termine su GitHub che dimostrano come fare questo.

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

Essenzialmente disegnano sulla tela e poi fare canvas.toDataURL('image/png') e quindi impostare il href <link> a tali dati-url.

Answer 5

Ho creato un biblioteca per animare favicon , di default è l'animazione loader (è generato da tela ), ma anche il supporto di animazione gif per il browser che non supportano gif out of the box (dalla versione 0.3.0).

API è semplice

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

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

La versione 0.4.0 avrà funzione di callback che genererà un frame qualcosa come:

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

e utente sarà in grado di disegnare singolo fotogramma

Nota: Le cose da considerare se si desidera implementare qualcosa di simile:

• per animare quando scheda non è attiva operaio uso web,
• Non utilizzare requestAnimationFrame, perché fermare l'esecuzione in MacOSX / Chrome anche in lavoratore web.

Answer 6

Per animare la favicon per praticamente tutti i browser, il seguente lavorato per me:

1. Scarica l'immagine di ogni fotogramma del GIF.

2. Collegare la prima immagine come un'icona con un ID:

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

3. Creare una funzione di loop, e utilizzare setTimeout() per ogni immagine. I tempi sono variabili e possono essere impostati per però velocemente si desidera l'animazione. Ecco un esempio:

   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. Crea un ciclo quando i carichi della finestra:

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

Questo metodo aiuta solo per garantire che altri browser possono visualizzare l'animazione, perché altri metodi funzionano solo in alcuni browser e versioni di browser.