Dynamic Favicons using HTML5 Local Storage and TinyCon

I was perusing Github the other day and I came across this awesome little JavaScript library. It’s called TinyConand it’s a small library for manipulating the favicon in your browser. It adds alert bubbles and changing images pretty similar to the way Gmail does.

Gmail Favicon Notification

It’s basically a really fun little library that allows you to add a notification bubble to your favicons. I started to play around with the code provided on Github and got up and running in no time.

<html>
<head>
<link rel=”icon” href=”favicon.ico”>
<title>Tinycon</title>
<script src=”../tinycon.js”></script>
<script>
(function(){
var count = 0;
setInterval(function(){
if (++count > 99) count = 0;
Tinycon.setBubble(count);
}, 1000);
})();
</script>
</head>
<body>
</body>
</html>

Using this simple example will give you something like this:

TinyCon Favicon Example

As you can see the above example is really simple and not really real world. It’s using a timer to update the icon every second. After messing around with the example on the site, I wondered how I could apply the notifications to this site. If I checked the last blog entry that they read on this site, then I would be able to notify them if there were any new blog post’s since their last visit. It’s just a fun experiment really!

If you are a regular visitor to the site, you might notice that you have a notification next to the favicon. This is how I went about it.

 <input type=“hidden” id=“blogCount” name=“blogCount” value=“<%= TempData["TotalPageCount"] %>” />
    <script type=“text/javascript”>
        // Check if user can handle localStorage first.
        if (typeof (localStorage) != ‘undefined’) {
            GetCount();
        }
        function GetCount() {
            // Get the last value
            var blogCount = localStorage.getItem(‘blogCount’);
            // If null, then set it
            if (blogCount == null) {
                localStorage.setItem(“blogCount”, document.getElementById(‘blogCount’).value); //saves to the database, “key”, “value”
            } else {
                // If not null then check the last count and compare
                var result = document.getElementById(‘blogCount’).value - blogCount;
                // If different, then show the favicon bubble
                if (result > 0) {
                    if (result != document.getElementById(‘blogCount’).value) {
                        window.Tinycon.setBubble(result);
                        // Re-add to localStorage
                        localStorage.setItem(“blogCount”, document.getElementById(‘blogCount’).value); //saves to the database, “key”, “value”
                    }
                }
            }
        }
    </script>

Original link: http://deanhume.com/Home/BlogPost/dynamic-favicons-using-html5-local-storage-and-tinycon/68

Ping your blog, website, or RSS feed for Free Sitetag