Mein PM hat die Anforderung, das Favicon in das animierte Ladebild zu ändern. Es funktioniert nur in Firefox, wenn ich einfach die link.href auf eine GIF-Datei zeige.

Ich habe einige Nachforschungen angestellt und festgestellt, dass Chrome kein animiertes Favicon unterstützt. Wiki sagt jedoch, dass Chrome 4.0 animierte GIFs unterstützt.

function changeFavicon() {
  var link = document.createElement('link');
  link.type = 'image/x-icon';
  link.rel = 'shortcut icon';
  link.href = 'http://uploads.neatorama.com/vosa/theme/neatobambino/media/loading.gif';
  document.getElementsByTagName('head')[0].appendChild(link);
}

Oben ist mein Code, aber Favicon nur in Firefox animiert.

2
newbie 20 Aug. 2015 im 00:05

4 Antworten

Beste Antwort

Möglicherweise möchten Sie favico.js ausprobieren. Damit können Sie ein Video als Favicon verwenden. Okay, das ist ein bisschen schwer für ein einfaches GIF, aber Sie haben die Idee. Außerdem können Sie wahrscheinlich den interessanten (und plattformübergreifenden) Teil erhalten, indem Sie sich den Code ansehen.

1
philippe_b 20 Aug. 2015 im 10:03

Das Problem ist, dass ein favicon vorhanden ist, das Sie zuerst entfernen müssen.

function removeFavicon() {
  var myHead = document.getElementsByTagName("head")[0];
  var lnks = myHead.getElementsByTagName('link');
  var len = lnks.length;
  for (var i = 0; i < len; ++i) {

    var l = lnks[i];
    if (l.type == "image/x-icon" || l.rel == "shortcut icon") {
      myHead.removeChild(l);
      return; // Returned assuming only one favicon link tag
    }

  }
}


function changeFavicon() {
  var link = document.createElement('link');
  link.type = 'image/x-icon';
  link.rel = 'shortcut icon';
  link.href = 'http://uploads.neatorama.com/vosa/theme/neatobambino/media/loading.gif';
  removeFavicon(); // remove existing favicon
  document.getElementsByTagName('head')[0].appendChild(link);

}

changeFavicon();
0
Robin Carlo Catacutan 19 Aug. 2015 im 21:25

Dies funktioniert für Google Chrome:

ERLÄUTERUNG: Google Chrome unterstützt keine animierten Favicons. Ich habe diesen Code als Alternative zur Verwendung einer Bibliothek eines Drittanbieters bereitgestellt. Um eine kontinuierliche Serverabfrage zu vermeiden, empfehle ich die Verwendung von Base64-codierten Frames.

FYI: Sie können ein Array verwenden, das die Base64-codierten Symbole enthält, und durch die Elemente blättern, anstatt eine switch-Anweisung zu verwenden. Ich bevorzuge jedoch, dass es auf diese Weise aufgebrochen wird.

WICHTIG: Es ist auch wichtig zu wissen, dass der Grund für die Verwendung von Base64-codierten Bildern darin besteht, dass nicht für jeden Frame fortlaufende Anforderungen an den Server gestellt werden.

document.head = document.head || document.getElementsByTagName('head')[0];
function changeFavicon(src) {
    var link = document.createElement('link'), oldLink = document.getElementById('dynamic-favicon');
    link.id = 'dynamic-favicon';
    link.rel = 'shortcut icon';
    link.href = src;
    if (oldLink) {
        document.head.removeChild(oldLink);
    }
    document.head.appendChild(link);
    }
function animate(){
    if ( typeof animate.i == 'undefined' ) {
        animate.i = 0;
    }
    switch(animate.i) {
        case 0:
            changeFavicon("[PUT BASE64 for ICO FRAME 1 HERE]");
            break;
        case 1:
            changeFavicon("[PUT BASE64 for ICO FRAME 2 HERE]");
            break;
        case 2:
            changeFavicon("[PUT BASE64 for ICO FRAME 3 HERE]");
            break;
        case 3:
            changeFavicon("[PUT BASE64 for ICO FRAME 4 HERE]");
            break;
        case 4:
            changeFavicon("[PUT BASE64 for ICO FRAME 5 HERE]");
            break;
        case 5:
            changeFavicon("[PUT BASE64 for ICO FRAME 6 HERE]");
            break;
        case 6:
            changeFavicon("[PUT BASE64 for ICO FRAME 7 HERE]");
            break;
        case 7:
            changeFavicon("[PUT BASE64 for ICO FRAME 8 HERE]");
            break;
        case 8:
            changeFavicon("[PUT BASE64 for ICO FRAME 9 HERE]");
            break;
        case 9:
            changeFavicon("[PUT BASE64 for ICO FRAME 10 HERE]");
            break;
        case 10:
            changeFavicon("[PUT BASE64 for ICO FRAME 11 HERE]");
            break;
        case 11:
            changeFavicon("[PUT BASE64 for ICO FRAME 12 HERE]");
            break;
        case 12:
            changeFavicon("[PUT BASE64 for ICO FRAME 13 HERE]");
            break;
        case 13:
            changeFavicon("[PUT BASE64 for ICO FRAME 14 HERE]");
            break;
        case 14:
            changeFavicon("[PUT BASE64 for ICO FRAME 15 HERE]");
            break;
        case 15:
            changeFavicon("[PUT BASE64 for ICO FRAME 16 HERE]");
            break;
    }
    animate.i = animate.i + 1;
    if(animate.i == 16){
        animate.i = 0;
    }
}
setInterval(animate,250);
2
Robert Talada 24 Sept. 2018 im 14:19

Ich habe ein anderes favicon.js verwendet. und ich habe 8 statische Symbole verwendet, um ein Ladeanimationssymbol zu simulieren.

    favicon.animate([
                 "img/loading1.ico", "img/loading2.ico",
                 "img/loading3.ico", "img/loading4.ico",
                 "img/loading5.ico", "img/loading6.ico",
                 "img/loading7.ico", "img/loading8.ico"
               ], 50);
2
newbie 20 Aug. 2015 im 16:40