I am interested in using favico.js for slack-for-linux to indicate unseen notifications. It would be used in the tray icon and possibly taskbar icon. Currently favico.js doesn't support this because it can only set against elementId or a <link> it creates.

To support this functionality, I suggest adding a new option which is a setter callback (i.e. a function that is run every time the image changes). With an integration into node-webkit, it would look like:

var favicon = new Favico({
  setter: function (png) {
    tray.icon = png;
  }
});

I've encountered an error that occurs on line 150:

TypeError: Cannot read property 'options' of undefined

This seems to happen intermittently, and I have yet to identify reliable repro steps. It seems to happen when performing multiple badge calls in succession. It also seems more likely to happen when the updates occur when the page is invisible.

My theory as to why this is occurring, and also why it's hard to repro, is that it's a race condition to access the first element of the queue array.

If _queue.shift(); completes and the resulting queue is empty before line 150 executes, that would throw the error above.

Here is what I think is happening, although I'm unsure.

Let's say I have an empty queue, and _lastBadge is false as set in init. Now I call badge(1), which pushes a set of options, which we will call 'A' into the queue and triggers icon.start. This kicks of an animation that lasts, let's say 100ms, using setTimeout to advance the animation at set intervals.

Now before A is complete, say 10ms in, we kick off another animation by calling badge(2), which we will call 'B'. This is scheduled to complete 110ms into our experiment.

Now at 100ms, A completes, and the finished callback is called. This function sets _lastBadge to A and shifts A out of the queue, leaving our queue containing 1 element, B.

The last thing our callback does is call icon.start again, which now triggers the animation.runcall on line 149, using animation A, which is our current value of_lastBadge`. When this is complete, at 200ms, we'll call animation.run again, with the first item in the queue.

Now fastforward 10ms and our initial B animation completes at 110ms. This also calls finished, which sets _lastBadge to B, shifts B off the queue (we now have an empty queue) and calls icon.start, which does nothing since _queue.length is 0.

Now fastforward to 200ms in, and the animation that was initiated by the finished callback completes. Instead of calling the finished callback, it calls animation.run with _queue[0].options as the first argument. But wait, _queue is empty!

Here is a diagram that illustrates what I'm thinking:

For any number greater than or equal to 100, the badge displays "00". This screenshot was taken from a badge that was meant to display 921:

Great script; easy to implement.

Slight issue, though: when active it breaks animated favicons. Any easy way around this, or plans to change it, or is it unavoidable?

Is there any way to get this working with a CMS that doesn't use actual directories and pages? Its a DB driven CMS, so a page like test.com/markets is not a physical file or folder anywhere.

I got it working to where I can push the favicon the first time, but every time after that I get an error saying that the favicon is on a different domain.

While inspecting the element, I see my normal favicon.ico on the page load. When I click the button to push the new favicon, it then changes to the data: tag. Once it's the data tag I no longer have the ability to change, I only get the different domain error.

Thanks for any information you can provide on this

Hello, I was trying to integrate https://github.com/jsxc/jsxc on my http://simplemachines.org forum (http://poke.lagos.p4u.gr) and I fell in this error. After some digging I traced the error on jsxc.dep.js on lines 32979 or favico.js on line 152 (since jsxc.dep.js is a copy of favico.js adding depedencies only).

_context.drawImage(_img, 0, 0, _w, _h);

After that I changed the line and it seems to work.

_img.onload = function(){_context.drawImage(_img, 0, 0, _w, _h);};

I note that I have tested with Firefox and Chromonium (same as Chrome) browser, and Chromonium seems to work fine without the fix, while Firefox doesn't.

Do you approve of this fix? Do you have anything else to recommend?

If you approve I will fork the project and make a merge request. Also, I think it is better programming practise to use an EventListener instead.

I'm getting the error TypeError: this is undefined because of the very last block of code in the library:

// included directly via <script> tag
    else {
        this.Favico = Favico;   // <------ BUG
    }

If this is replaced with window, then it works.

I initialized with Favico like this:

favicon = new Favico
  animation: 'none'

but to find the badge not appearing when I call favicon.badge(3). I debugged into favico.js but found the state __running stay false just like that finished function was never called.

/**
 * Start animation
 */
icon.start = function() {
    if (!_ready || _running) { // <-- I found this _running false
        return;
    }
    var finished = function() {
        _lastBadge = _queue[0];
        _running = false;
        console.log('running -> false')
        if (_queue.length > 0) {
            _queue.shift();
            icon.start();
        } else {

        }
    };
    if (_queue.length > 0) {
        _running = true;
        console.log('running -> true')
        var run = function() {
            // apply options for this animation
            ['type', 'animation', 'bgColor', 'textColor',
             'fontFamily', 'fontStyle'].forEach(function(a) {
                if (a in _queue[0].options) {
                    _opt[a] = _queue[0].options[a];
                }
            });
            animation.run(_queue[0].options, function() {
                finished();
            }, false);
        };
        if (_lastBadge) {
            animation.run(_lastBadge.options, function() {
                run();
            }, true);
        } else {
            run();
        }
    }
};

But I failed to locate the problem. It happens in Chrome and Firefox but does not happen every time. Looks like when I called it too frequenly and it breaks. Anyone run into this?

it's working fine on firefox, but I don't get it working on chromium or chrome. that's my code and how i link the favicon. is there anything wrong?

<link rel="shortcut icon" href="http://localhost/oratio/favicon.ico">

window.favicon=new Favico({
    animation:'slide'
});
window.favicon.badge(count);

Trying the webcam demo on http://lab.ejci.net/favico.js/ doesn't do anything for Chrome 48.0.2564.82. The button text changes (both buttons), but the icon doesn't change and I'm never asked for permission to use the webcam. Stop webcam seems to refresh the page.

Console output:

favicon.min.js:7

getUserMedia() no longer works on insecure origins.
To use this feature, you should consider switching your application to a secure origin, such as HTTPS.
See https://goo.gl/rStTGz for more details.

It's 4.8M large when I try to install from Bower, that's really large. Considering the bad networking in China it would take some minutes to download. Could you figure out a solution to reduce the size...

BTW I noted there is samller one here but outdated: https://github.com/fastdivision/favico.js-lite

In Firefox 102, I see a warning logged to the console on the project home page:

InstallTrigger is deprecated and will be removed in the future. favico.min.js:7:819

It seems this has been deprecated since Firefox v100: 1754441 - Deprecate InstallTrigger

As far as I can see, this is only used for browser detection:

_browser.ff = typeof InstallTrigger != 'undefined';

I need help to understand why there is a check for if (_queue.length > 100) { throw new Error('Too many badges requests in queue.'); } what if queue lenght is more then 100 ? example chat application user getting more then 100 messges......

The first badge update goes through fine, but then updates are only applied when the user is looking at the page. This seems to be a Chrome change because it works fine in earlier versions of Chrome, but the fix for the time being is to trigger the update twice.

Firefox 46 runs into an error when it executes the drawImage line (see below) and no link tag for a favicon is in the html. The reason for that error is that this browser version is not able to draw an empty image on the canvas. Could you please correct that?