title: flash favicon back and forth
body: <p>I'm trying to run a bit of code to flash the favicon back and forth between 2 <code>.ico</code>'s indefinitely every second. So far I've got this code which changes it once, but not again;</p>
  
  <pre><code>var favUrl = "favicon.ico";
  var flashFavIco = function() {
      if(favUrl == "favicon.ico") {
          favUrl = "favicon-white.ico";
      } else {
          favUrl = "favicon.ico";
      }
      console.log(favUrl);
      var link = document.createElement('link');
      link.type = 'image/x-icon';
      link.rel = 'shortcut icon';
      link.href = 'http://www.mysite.com/' + favUrl;
      document.getElementsByTagName('head')[0].appendChild(link);
  };
  setInterval(flashFavIco, 1000);
  </code></pre>
  
  <p>I tested adding <code>console.log()</code>s in the if/else sections to check that <code>favURL</code> was being set each second, which it was indeed. So I'm a little stuck as to why the favicon only changes once. Is this a browser issue?</p>
  
  <p><strong>Edit:</strong> I do realise this continually adds new <code>&lt;link ...</code> tags to the head, and I'm working on writing that <code>appendChild</code> part differently, this does not affect my original question</p>