Comment animer un favicon?

Question

Comment animer un favicon comme ça?

Il semble fonctionner que dans Firefox.

Answer 1

Alors qu'il est actuellement pris en charge uniquement par les autres navigateurs FireFox, nous l'espérons soutenir à l'avenir. Pour obtenir l'effet, vous devez télécharger le Gif sur votre serveur, puis ajoutez la ligne ci-dessous à la section head de votre page:

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

Jetez un oeil à AnimatedFavIcon.com de l'aide et des ressources supplémentaires.

Answer 2

Presque certainement pas ce que vous cherchez, mais certaines personnes sont allés jusqu'à écrire à la programatically favicon en JavaScript côté client. L'URL suivante montre le vieux videogame 'Defender' jouer dans le favicon:

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

Cela fonctionne dans Firefox, Opera et Safari, mais pas dans au moins anciennes versions d'IE. Je ne suis pas sûr de ce que le dernier IE pourrait être capable.

Faire une « source de vue » sur cette page fait pour tout à fait une lecture intéressante.

Answer 3

Firefox

Firefox prend en charge les favicons animés. Il suffit d'ajouter un lien vers le GIF dans la balise <link rel="icon">:

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

Vous pouvez également utiliser le fichier d'animation d'ICO. Dans ce cas les navigateurs qui ne prennent pas en charge les favicons animés affiche uniquement la première image.

D'autres navigateurs

vous pouvez dans d'autres navigateurs animer un favicon en utilisant JavaScript. Il vous suffit d'extraire des images uniques du GIF et changer <link rel="favicon"> src chaque fois que les changements de cadre GIF. Voir ce code par exemple ( 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)
}

_{je libgif.js pour extraire des images GIF.}

Malheureusement, l'animation est pas très lisse dans Chrome. Dans Firefox, il fonctionne très bien, mais Firefox supporte déjà favicons GIF.

Découvrez aussi favico.js bibliothèque.

Voir aussi

• Comment ajouter une icône de l'onglet du navigateur (favicon) pour un site Web?
• Changement site favicon dynamique

Answer 4

Il y a repo sur GitHub montrant comment faire cela.

http://lab.ejci.net/favico.js/example- simple, /

Essentiellement, ils tirent sur la toile, puis faire canvas.toDataURL('image/png') puis définissez le href <link> à ces données-url.

Answer 5

J'ai créé une bibliothèque pour animer favicon, par défaut est l'animation de chargement (il est généré par la toile ), mais il soutient également l'animation gif pour le navigateur qui ne prennent pas en charge gif de la boîte (de la version 0.3.0).

API est simple

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

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

Version 0.4.0 sera fonction de rappel qui va générer une trame quelque chose comme:

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

et l'utilisateur sera en mesure de dessiner une seule image

NOTE: Les choses à considérer si vous voulez mettre en œuvre quelque chose comme ceci:

• pour animer lorsque l'onglet n'est pas travailleur web utilisation active,
• ne pas utiliser requestAnimationFrame, car il arrête l'exécution dans MacOSX / Chrome même travailleur web.

Answer 6

Pour animer le favicon pour à peu près tous les navigateurs, les éléments suivants ont travaillé pour moi:

1. télécharger une image de chaque trame du gif.

2. Lier la première image comme une icône avec un id:

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

3. Créer une fonction de boucle, et en utilisant setTimeout() pour chaque image. Les temps sont variables et peuvent être configurés pour toutefois vous rapide comme l'animation. Voici un exemple:

   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. Créer une boucle lors du chargement de la fenêtre:

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

Cette méthode permet simplement de faire en sorte que les navigateurs peuvent plus voir l'animation, parce que d'autres méthodes ne fonctionnent que dans certains navigateurs et versions de navigateur.