Wie ein Favicon animieren?

Question

Wie ein Favicon, so animieren?

Es scheint nur in Firefox zu arbeiten.

Answer 1

Während es zur Zeit ist nur durch FireFox anderen Browsern unterstützt wird hoffentlich auch in Zukunft unterstützen. Um den Effekt zu erzielen, müssen Sie die gif auf Ihren Server hochladen und fügen Sie dann die folgende Zeile zu head Abschnitt Ihrer Seite:

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

Hier finden Sie aktuelle AnimatedFavIcon.com für zusätzliche Hilfe und Ressourcen.

Answer 2

Mit ziemlicher Sicherheit nicht das, was Sie suchen, aber einige Leute haben so weit zu programmatisch schreiben Sie an die Favicon in Client-Seite JavaScript gegangen. Die folgende URL zeigt das alte Videospiel ‚Defender‘ spielt im Favicon:

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

Dies funktioniert in Firefox, Opera und Safari, aber nicht in zumindest älteren Versionen von IE. Ich bin mir nicht sicher, was die neueste IE in der Lage sein könnte.

Doing ‚Quelltext anzeigen‘ auf dieser Seite macht für eine sehr interessante Lektüre.

Answer 3

Firefox

Firefox unterstützt animierte Favicons. Fügen Sie einfach einen Link zu dem GIF in <link rel="icon"> Tag:

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

Sie können auch animierte ICO-Datei verwenden. In diesem Fall sind Browser, die nur das erste Bild wird nicht angezeigt animierte Favicons unterstützen.

Andere Browser

In anderen Browsern können Sie ein Favicon mit JavaScript animieren. Sie müssen nur einzelne Frames aus dem GIF und ändern <link rel="favicon"> src jede Zeit, um die GIF-Frame Änderungen extrahieren. Sehen Sie diesen Code zum Beispiel ( 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)
}

_{I verwendet libgif.js GIF-Frames zu extrahieren.}

Leider ist die Animation nicht sehr glatt in Chrome. In Firefox funktioniert es großartig, aber Firefox unterstützt bereits GIF Favicons.

Sehen Sie sich auch favico.js Bibliothek.

Siehe auch

• Wie ein Browser-Tab-Symbol (Favicon) für eine Website hinzufügen?
• Ändern Website Favicon dynamisch

Answer 4

Es gibt repos auf GitHub zeigen, wie zu tun dies.

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

Im Wesentlichen zeichnen sie auf der Leinwand und dann canvas.toDataURL('image/png') tun und dann die <link> href auf diese Daten-URL.

Answer 5

ich erstellt habe eine Bibliothek Favicon zu animieren, loader Animation Standard ist (es wird von Leinwand erzeugt ), aber es auch gIF-Animation für Browser unterstützt, die (ab Version 0.3.0).

nicht gif aus der Box unterstützen

API ist einfach

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

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

Version 0.4.0 wird Callback-Funktion, die einen Rahmen so etwas wie generieren:

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

und Benutzer einzelnen Frame in der Lage

ziehen

Hinweis: Dinge beachten, wenn Sie so etwas wie dies implementieren möchten:

• animieren, wenn Register nicht aktiv verwendet Web-Arbeiter ist,
• verwenden nicht request, weil es in MacOSX / Chrome auch in Web-Arbeiter stoppen ausgeführt wird.

Answer 6

das Favicon animieren für so ziemlich alle Browser, die für mich gearbeitet folgende:

1. Laden Sie ein Bild von jedem Rahmen des gif.

2. Verknüpfen Sie das erste Bild als Symbol mit einer ID:

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

3. eine Funktion Schleife erstellen und verwenden setTimeout() für jedes Bild. Die Zeiten sind variabel und können jedoch eingestellt werden, um schnell würden Sie die Animation mögen. Hier ein Beispiel:

   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. eine Schleife erstellen, wenn die Fenster Lasten:

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

Diese Methode hilft nur, um sicherzustellen, dass mehr Browser die Animation sehen kann, weil andere Methoden nur in bestimmten Browsern und Browser-Versionen.