Tuesday, May 20, 2014

Favicon - adding badge

Adding notification count (badge) to favicon is a user-friendly design to show indicator of activities, allowing user to easily see if attention is required. There are quite a few open source implementations from github, after looking at following three libraries, I decide to use Tinycon which supports fallback (with page title update) and AMD usage. Its two sentences description is exactly what I am looking for. However, other two (favico and notify-better are great too).

http://lab.ejci.net/favico.js/
Make a use of your favicon with badges, images or videos. Animate your favicon with animated badges. You can customize type of animation, position, background color and text color. You need initialize it, e.g. var favico = new Favico()

http://blog.tommoor.com/tinycon/
Tinycon (object in global namespace) allows the addition of alert bubbles and changing the favicon image. Tinycon gracefully falls back to a number in title approach for browsers (IE and Safari) that don't support canvas or dynamic favicons.

https://github.com/peachananr/notify-better
An all in one jQuery plugin that let you change your favicon, browser's title and more to reflect new notifications. It has ajax option support.

This is the first step to make browser tab active. Next, I will work on Web Notification (HTML5) and Push notification (Maverick/Safari already supports it as of today).

1 comment:

  1. However, after using tinycon, I found 3 issues which might change my mind to use other library unless I go to change its source code. (https://github.com/tommoor/tinycon/issues)

    ReplyDelete