Favicon: Make a use of your favicon with badges, images or videos

Favicon.js jQuery plugin allows you tu to use your favicon with badges, images or videos

Animate your favicon with animated badges (slide, fade, pop, etc…).

You can customize type of animation, position, background color and text color.

Download: https://github.com/ejci/favico.js

Demonstration: favico.js – Make use of your favicon (ejci.net)

Plugin homepage: favico.js – Make use of your favicon (ejci.net)

Implementation:

1. First, include the jQuery files

<!-- jQuery files -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="favicon-0.3.4.min.js"></script>

2. Now, call Favicon plugin

<script type="text/javascript">
  $(document).ready(function(){
    // Simple call
    var badge = 5; // Set badge value
    var favicon = new Favico(); // Create favicon
    
 
    // Call Favicon plugin with options
    var badge = 5; // Set badge value
    var favicon = new Favico({
        animation : 'popFade', // set animation type
        bgColor : '#000', // set the badge bgcolor
        textColor: '#fff', // set the badge text color
        fontFamily : 'Arial' // set the badge font-family property
    });
  });
</script>

3. Play with badge values

<script type="text/javascript">
  $(document).ready(function(){
 
    // Add +1 to bagde value when clicking on a button with id="plusOne"
    // exemple <button id="plusOne">+1</button>
    $('#plusOne').click(function() {
        badge = badge + 1;
        favicon.badge(badge);
    });
 
    // Add -1 to bagde value when clicking on a button with id="minusOne"
    // exemple <button id="minusOne">-1</button>
    $('#minusOne').click(function() {
        badge = (badge-1 < 0) ? 0 : (badge - 1);
        favicon.badge(badge);
    });
 
    // Reset badge value = hide badge
    // exemple <button id="reset">Reset badge</button>
    $('#reset').click(function() {
        favicon.reset();
    });
  });
</script>

4. Show image, video or webcam instead of your favicon

<script type="text/javascript">
  $(document).ready(function(){
 
    // Show an existing image on your webpage
    var favicon=new Favico();
    var image=document.getElementById('imageId');
    favicon.image(image);
 
    // Show a video instead of your classical favicon
    var favicon=new Favico();
    var video=document.getElementById('videoId');
    favicon.video(video);
    //stop the video
    favicon.video('stop');
 
    // Show your webcam instead of your classical favicon
    var favicon=new Favico();
    favicon.webcam();
    //stop
    favicon.webcam('stop');
  });
</script>

Options:

bgColor	String	Default : #d00 – Badge background color
textColor	String	Default : #fff – Badge text color
fontFamily	String	Default : sans-serif – Text font family (Arial, Verdana, Times New Roman, serif, sans-serif,…)
fontStyle	String	Default : bold – Font style (normal, italic, oblique, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900)
type	String	Default : circle – Badge shape (circle, rectangle)
position	String	Default : down – Badge position (up, down, left, upleft)
animation	String	Default : slide – Badge animation type (slide, fade, pop, popFade, none )
elementId	Boolean	Default : false – Image element ID if there is need to attach badge to regular image

Screenshots