web-dev-qa-db-fra.com

Comment animer un favicon?

Comment animer un favicon comme ça?

animated favicon

Cela semble fonctionner uniquement dans Firefox.

htmlfavicon
35
tonyf

Bien qu'il ne soit actuellement supporté que par FireFox, d'autres navigateurs le supporteront dans le futur. Pour obtenir cet effet, vous devez télécharger le gif sur votre serveur, puis ajouter la ligne ci-dessous à la section head de votre page:

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

Jetez un coup d'œil à AnimatedFavIcon.com pour obtenir de l'aide et des ressources supplémentaires.

29
Chris Van Opstal

Ce n’est certainement pas ce que vous recherchez, mais certaines personnes sont allées jusqu’à écrire par programme dans la favicon en JavaScript côté client. L’URL suivante montre l’ancien jeu vidéo 'Defender' jouant dans la favicon:

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

Cela fonctionne dans Firefox, Opera et Safari, mais pas dans au moins les versions antérieures d’IE. Je ne sais pas de quoi le dernier IE pourrait être capable.

Faire une "source de vue" sur cette page en fait une lecture assez intéressante.

23
teapot7

Firefox

Firefox supporte les favicons animés. Ajoutez simplement un lien vers le GIF dans la balise <link rel="icon">:

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

Vous pouvez également utiliser un fichier ICO animé. Dans ce cas, les navigateurs qui ne prennent pas en charge les favicons animés n’afficheront que la première image.

D'autres navigateurs

Dans d'autres navigateurs, vous pouvez animer un favicon à l'aide de JavaScript. Il vous suffit d'extraire des images individuelles du fichier GIF et de modifier <link rel="favicon"> src à chaque changement d'image 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)
}

J'ai utilisé libgif.js pour extraire les cadres GIF.

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

Découvrez également favico.js library.

Voir également

11
Michał Perłakowski

Il y a des repos sur GitHub démontrant comment faire cela.

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

Essentiellement, ils dessinent sur le canevas puis font canvas.toDataURL('image/png'), puis définissent le <link> href sur cette URL de données.

3
Lance Pollard

J'ai créé une bibliothèque pour animer favicon , par défaut, l'animation du chargeur (elle est générée par canvas), mais elle prend également en charge l'animation gif pour les navigateurs ne prenant pas en charge gif (à partir de la version 0.3.0) .

L'API est simple

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

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

La version 0.4.0 aura une fonction de rappel qui générera une image comme:

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

et l'utilisateur sera en mesure de dessiner un seul cadre

NOTE: Points à considérer si vous souhaitez implémenter quelque chose comme ceci:

  • animer quand onglet n'est pas actif, utilisez web worker,
  • n'utilisez pas requestAnimationFrame, car il cesse de s'exécuter dans MacOSX/Chrome, même dans le Web Worker.
1
jcubic

Pour animer le favicon pour à peu près TOUS les navigateurs, voici ce qui a fonctionné pour moi:

  1. Téléchargez une image de chaque image du gif.

  2. Liez la première image sous forme d'icône avec un identifiant:

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

  3. Créez une fonction à boucler et utilisez setTimeout() pour chaque image. Les temps sont variables et peuvent être réglés aussi rapidement que vous le souhaitez. 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éez une boucle lorsque la fenêtre se charge:

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

Cette méthode permet simplement d’assurer que davantage de navigateurs puissent voir l’animation, car les autres méthodes ne fonctionnent que dans certains navigateurs et dans certaines versions de navigateurs. 

0
Malmadork