YJL

Tinycon is an interesting small JavaScript library for manipulating page’s favicon. Here is a quick example, click on the button below and look at my favicon!

<script src="http://tommoor.github.io/tinycon/tinycon.min.js"></script>
<script>
function bubble_favicon(){
  // $('link[rel=icon]').attr('href', 'data:image/x-icon;base64,LONG_LONG_BASE64_DATA');
  TEXT = 'YJL --verbose';
  TEXT_idx = 0;
  setInterval(function(){
    Tinycon.drawFavicon(TEXT[TEXT_idx++]);
    TEXT_idx %= TEXT.length;
  }, 1000);
  $('#btn-bubble-favicon').remove();
}
</script>

There is another issue I encountered when I was writing this post. I couldn’t get the text rendered because the icon was at cross-domain, which caused Firefox raised a security exception when calling toDataURL on a canvas. If your page can be under same situation, you can update the favicon link element as shown above in commented code, so you wouldn’t have problem to use with Tinycon.