Manipulate The Favicon With Tinycon

When you get alerts and notifications from Facebook, twitter or your email client depending on the browser you will be alerted of new activity. An example of this is if I leave my gmail open on another tag Chrome will highlight when I have a new email coming through by highlighting the gmail tab. But if the tab is pinned I can only see that I have an unread email I can't see how many emails I have. It would be really useful if gmail can bring up a little alert on the browser tab with the amount of unread emails I currently have. Same with Facebook if I have some unseen notifications it would be good to show how many there are on the browser tab of the favicon. I found this plugin that allows you to do exactly that, using this plugin you can generate an alert box on the favicon to notify your users of new activity.

#Tinycon Plugin

Tinycon is a plugin that allows you to manipulate the website favicon by allowing you to add an alert box or change the image on the browser tab. For browsers that don't support this Tinycon will also fallback to adding different numbers to the end of the title bar. Download Tinycon Tinycon is currently supported on browsers - Chrome 15+

• Firefox 9+
• Opera 11+

#How To Use Tinycon Plugin

To use Tinycon it's very simple all you have to do is download the plugin from the github project, and add it to the page.

<script src="tinycon.js"></script>

Now there is a Javascript object added to the page called Tinycon, with this object you use two methods to define the alert box. First you set the bubble properties by using the method setOptions(), with the following properties. - Width - The width of the alert box

• Height - The height of the alert box
• Font - Font used in the alert box
• Colour - Font colour inside the alert box
• Background - Background colour of the alert box
• Fallback - Fallback to number in brackets on the title bar for browsers that don't support changing the favicon.

Tinycon.setOptions({
    width: 7,
    height: 9,
    font: '10px arial',
    colour: '#ffffff',
    background: '#FF0000',
    fallback: true
});

To set the alert box to be displayed we then use the method setBubble( int ).

Tinycon.setBubble(15);