With the lattest additions favico.js can support icon fonts for badge icons. And I think that it's really great news, opening new possibilities! So maybe it will be useful to add some examples of using this functionality. I tested it with FontAwesome and it works! Some simple icons (like "check" and so on) fit the bages very well!

Hi,

I'm trying to this plugin on markafoni.com. But it isn't work.
Probably cause user-agent.

Do you have any idea?

To recreate:
run Chrome 43.0.2357.81 on Windows 8.1 Pro
browse to some web page which has a
in console:
new Favico()

Error received:
Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

Stack trace:
L.setIcon
M.reset
M.ready
a.hasAttribute.c.onload

Overview

I found some memory leaks via the calls to document.createElement in favico.js v0.3.9.

OS and Browser

Ubuntu Gnome 14.04 64-Bit
Chromium Version 43.0.2357.130

How to Reproduce

1. Visit the favico.js homepage.
2. Open up the Google Chrome Developer Tools
3. Select the Profiler tab
4. Select Take Heap Snapshot and then Take Snapshot
5. Set class filter to HTMLImageElement or HTMLCanvasElement
6. Reveal one of the element trees and see the detached nodes in red.

_img looks to be related to the onload function it has bound to it. I am not sure about _canvas though. I noticed this while profiling one of the products I work on, and figured it might be useful information. If you need any more info please let me know. Thanks!

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

Failed to load resource: the server responded with a status of 404 (Not Found) http://lab.ejci.net/favico.js/favico-0.2.1.min.js

Noticed on chrome/firefox latest stable that when we update the badge value using an animation, after animation ends, the red circle is at the 'bottom' position whereas we had set the position to be top.

This is particularly prevalent when the favicon is being displayed on the browser tab that is not the current active tab in the browser.

I'm using Pusher to update several aspects of my application in real time, including the favicon badge.

Favico is working just fine for me while my application's tab is in the foreground. However, when another tab is selected, the badge change animations appear to happen in super slow motion. I'm guessing this might be because background tabs are given limited resources by chrome. I'm also seeing very similar results in firefox.

Anyone else encountering this issue? Any way around it?

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:

{
"name": "favico.js",
"version": "0.3.1",
"homepage": "http://lab.ejci.net/favico.js/",
"authors": ["Miroslav Magda [email protected]"],
"description": "Favico.js is a library to manipulate the favicon, adding alert badges, render images or videos.",
"main": "favico.js",
"keywords": ["favicon", "badge"],
"license": "MIT",
"ignore": ["*/.", "node_modules", "bower_components", "test", "page", "example-simple", "example-angular", "tests"]
}

To

{
"name": "favico.js",
"version": "0.3.1",
"homepage": "http://lab.ejci.net/favico.js/",
"authors": ["Miroslav Magda [email protected]"],
"description": "Favico.js is a library to manipulate the favicon, adding alert badges, render images or videos.",
"main": "favicojs",
"keywords": ["favicon", "badge"],
"license": "MIT",
"ignore": ["*/.", "node_modules", "bower_components", "test", "page", "example-simple", "example-angular", "tests"]
}

The final folder root should not contain a dot, might be confused for a file type of a folder.

I've been checking the source code and it doesn't seem as easy as I expected, but it would be very nice to be able to count higher than 9.

Since there is space for '9+' ==> 2chars, it should be possible to go up to 99 and to replace 99+ by another symbol like infinite sybol.

Hi there,

We are using favico.js in our e-commerce solution here. (Try adding a new item to shopping bag).

http://themes.fuelthemes.net/uberstore/shop/

It was working fine, but when we switched to a higher resolution icon (256x256), Favico.js stopped working or stopped being visible.

The icon we are using is : http://themes.fuelthemes.net/uberstore/wp-content/themes/uberstore-wp/assets/img/favicon.ico

Thanks in advance for your help

Got the error on initialization on chrome.

Caused by declaring your favico in index.html

With #54, we are allowing the export of the data URI itself. We should also allow to get a source URI with no element attached to it.

My first attempt was to imitate the DOM:

// Inside `link.getIcon`
if (_opt.getter) {
  url = _opt.getter();
  elm = {
    hasAttribute: function () { return true; },
    getAttribute: function () { return url; },
    setAttribute: function () {},
    href: url
  };
} else if (_opt.element) {
  elm = _opt.element;

However, now that I think about it, we can probably create a generic link and pass that through:

if (_opt.getter) {
  elm = document.createElement('link');
  elem.setAttribute('href', _opt.getter());
}

Thoughts on adding support for this? Currently in slack-for-linux, I am doing the same thing but outside of the library.

It works:

http://www.enhanceie.com/test/favicon/dynamic.htm

On the examples, both calling to reset of decreasing the badge number down to zero it doesn't play an animation to remove the badge as happens with other quantities but instead the badge just plainly dissapear, that's a little bit annoying.

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.

Hi,

I want to implement this nice feature on my shop website.
But I got this error message in console:
Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

Is this library works only with .ico files? :)

Thanks,
Peter.

Hello, thanks for great plugin
I try in chrome is working well, but in firefox the count number in favicon badges not showing.

I see that you have an npm-style package.json – are you open to publishing this repository on npm?

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

In code used:

throw 'Too many badges requests in queue.';

In catch used:

throw 'Error setting badge. Message: ' + e.message;

When Too many badges happens - console output:

Uncaught Error setting badge. Message: undefined

Needs change code to:

throw new Error('Too many badges requests in queue.');

or

throw 'Error setting badge. Message: ' + (e.message ? e.message : e);

Is it possible to add a reset method? It's very difficult to figure out how to do it from your example.js

Hi,

My favicon is located at http://mmaprophet.com/images/favicon.png but when I access
http://mmaprophet.com/event/UFC170 I will get the error message.

"Error setting favicon. Favicon image is on different domain (Icon: , Domain: mmaprophet.com)"

My code:

link rel="shortcut icon" href="http://mmaprophet.com/images/favicon.png" type="image/png"

script:

$(function() {
var favicon=new Favico({
animation:'slide'
});
favicon.badge(1);
});

http://lab.ejci.net/favico.js/example-angular/

Not found http://lab.ejci.net/favico.js/example-angular/favico-0.3.5.min.js

Is it possible to add a looped animation option? Or it will be too resource unfriendly? I'm speaking about something like blinking badge with icon, for example, when it's needed to draw users attention to the browsers tab

I need to change multiple tags at the same time for browser compatibility reasons, so I'm creating 2 instances and specifying the "element" option on each. But when you specify that option it changes the src attribute instead of the href and the browsers just take the href and ignore the src.

I see this

if (_opt.element) {
    _opt.element.setAttribute('src', url);
}

in link.setIcon, but am a little confused to its purpose considering the website describes the element option as

DOM element where to change "href" attribute (useful in case of multiple link icon elements)

Is there a way to superimpose a dirty indicator (e.g. a small dot / circle) instead of a number?

There is an icon font option, but that is too complicated for something so simple. Then there is the option of showing a symbol, but the Favico object only accepts numbers.

Is there a way to do this?

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;
  }
});

Hello, Miro and everyone I'm new to this website and blogging so I'm sorry if I say anything obvious, I'm just trying to learn. I'm trying to create a favicon and so far I haven't been able to make the proper one. I would like to have a diamond shaped outline that is empty with a photo inside of the outlines, so I know this requires two separate pictures but I just don't know how to do it. Can someone please help me!!!????
Greatly Appreciated.

Hi,

clicking reset or any other button doesn't stop the video+audio being played on Firefox (haven't tested on Chrome) on your homepage.

This project is really useful and well done except that issue.

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?

Being able to choose which corner on the icon the badge is placed on would be a nice addition (some icons look weird when badge is in lower right corner)

When I leave the tab and go to a different tab, the icon animates up and is set to the bottom right. But if I leave the tab and go to a different app (like my text editor) the icon animates from top and is on top left, which is what I have the options set to. WHy would it do two different things based on which thing Im leaving it for?

Hi, i have an video playing via html 5 video from an external source.
Is it possible to put them as thumbnail?
i did some research, and it looks like a convertion to base64 data format would solve the issue:
http://stackoverflow.com/questions/2390232/why-does-canvas-todataurl-throw-a-security-exception
There also seems to be another solution using javascript origin control:

     var c = document.createElement("img");
      c.onload=function(){
          // add the image to canvas or whatnot
          c=c.onload=null
      };
      c.setAttribute('crossOrigin','anonymous');
      c.src='http://google.com/cat.png';

The errors i am getting are:
onStart:
Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. favico.js:7

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. favico.js:7 (This one is thrown every second)

onStop:
Uncaught Error setting video. Message: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

Thank you for your support :)

I use a png for the favicon. But when favico.js adds the bubble the transparent pixels get black. And it looks like the tool is centering the image.

The repo has a minified file with this format: favico-0.3.7.min.js. Which is non-standard, and is a hassle to get working with build scripts.

Is it possible to use a standard filename for the next release, i.e. without anything dynamic (in this case, version numbers)?

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:

Before calling canvas.getContext('2d') on line 103 check if is function avalible. (IE8)

This is maybe more a question than a bug. I have been trying everything, but nothing seems to work.

First I will explain what is expected behavior:

0.) set badge
1.) change the icon, bud preserve the badge
2.) show badge on top of changed icon
3.) change the icon to original, bud preserve the badge
4.) continue the loop from the 0.)

My code looks like this:

HTML:

JavaScript:
var favico = new Favico();
changeFaviconEventHandler = function(img) {
favico.image(img);
};
changeBadgeEventHandler = function(number) {
favico.badge(number);
};

The actual behavior is this:

Whenever I call favico.image(img), badge is lost. Whenever I call favico.badge(number) icon is resetted to the original icon, that was there when the page loaded and badge information is shown on top of it.

Am I missing something or my expected behavior is not possible using this library ?

Thanks a lot.

If I try to npm install favico.js I get version 0.3.8.
If I visit the packages site on npmjs, I also see 0.3.8.
Looks like it hasn't been published, but I see 0.3.9 has been out for almost 10 days now.

I can easily require the latest release through github, but I would rather get it through npm, so if you could put it up I would appreciate it. Thanks!

I have my site in my bookmarks toolbar in chrome. I've noticed that if I close the window while the favicon is displaying a non-zero number, it remains that way in the bookmarks toolbar. Is there any way to counteract this that you know of?

If I only have one favicon, it works with the following code:

new Favico({
    animation: 'none'
})

But not with:

new Favico({
    animation: 'none',
    element: document.getElementById('...')
})

Nothing is happening.

I think it might be updating the wrong icon. I see that there's an element option but specify the simple favicon doesn't work. If a different icon is actually in use by Chrome (surely not, right?), then I don't know which I should be specifying.

So next I tried creating a favico instance for every link[rel="icon"] I have and updating all of them in a loop. That didn't work either.
#59 also doesn't help.

Any idea @ejci?

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);

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

console reference in code breaks on IE

If you want console a fix can be found here
http://stackoverflow.com/questions/3326650/console-is-undefined-error-for-internet-explorer

Changing the font type from "bold" to "normal" would be a nice addition.