Using favico.js with AngularJS

Few weeks ago I’ve created javascript library called favico.js that allows to animate favicon on your website, play videos in the favicon or stream your webcam stream to favicon. Some people have difficulties to integrate my library into AngularJS app.

Integrating favico.js into AngularJS app is really simple. The only thing you need, is to create an AngularJS service that will “encapsulate” favico.js. Services in AngularJS are singletons and thats great because if you want to use favico.js on your site you need to create only one instance of Favico object.

Basically you need to create service like this:

* Simple favicon service
angular.module('favico.service', []).factory('favicoService', [
function() {
var favico = new Favico({
animation : 'fade'

var badge = function(num) {
var reset = function() {

return {
badge : badge,
reset : reset

Then you can use this service in your controllers:

angular.module('app.controllers', ['favico.service']).controller('homeCtrl', ['$scope', 'favicoService', /**
 * Home view controller
 * @param {Object} $scope
function($scope, favicoService) {
    //initial value
    $scope.count = 3;
    //badge +1
    $scope.plusOne = function() {
        $scope.count = $scope.count + 1;
    //badge -1
    $scope.minusOne = function() {
        $scope.count = ($scope.count - 1 < 0) ? 0 : ($scope.count - 1);
    //badge reset (count will be preserved)
    $scope.reset = function() {
    //init value

I’ve created example AngularJS app with two views that use favico.js service and changes badge number according to user actions.

Source code of the example app is on GitHub.
Working demo is on

If you have any questions feel free to ask.

2 thoughts on “Using favico.js with AngularJS

  1. Luís Felipe de Andade

    I`m really lucky, i was looking for your plugin documentation to make work using with angularjs and the first post of the page was this! Thank u


Leave a Reply to Miroslav Magda Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.