# favico.js v0.3.6

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

View on GitHub

Try it:

###### Works on Chrome, Firefox, Opera and IE11+

### Badges

Animate your favicon with animated badges. You can customize type of animation, position, background color and text color.

### Slide animation

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

### Fade animation

    var favicon=new Favico({
        animation:'fade'
    });
    favicon.badge(2);

### Pop animation

    var favicon=new Favico({
        animation:'pop'
    });
    favicon.badge(3);

### Pop & fade animation

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

### Without animation

    var favicon=new Favico({
        animation:'none'
    });
    favicon.badge(2);

### Position

    var favicon=new Favico({
        position : 'up'
    });
    favicon.badge(3);

### Shape setting

    var favicon=new Favico({
        type : 'rectangle',
        animation: 'slide',
    });
    favicon.badge(1);

### Attach to regular image

    var favicon=new Favico({
        type : 'rectangle',
        elementId : 'badgeImage'
    });
    favicon.badge(2);

### Color settings

    var favicon=new Favico({
        bgColor : '#5CB85C',
        textColor : '#ff0',
    });
    favicon.badge(3);

### Images / Video / Webcam

Create icon on the go from images, videos or even a webcam stream

### Regular image to icon

    var favicon=new Favico();
    var image=document.getElementById('imageId');
    favicon.image(image);

### HTML5 Video to icon

Video tag not supported. Download the video here.

    var favicon=new Favico();
    var video=document.getElementById('videoId');
    favicon.video(video);
    //stop
    favicon.video('stop');

### Webcam video to icon

This is only for fun but it works :)
Works on Chrome, Firefox and Opera

    var favicon=new Favico();
    favicon.webcam();
    //stop
    favicon.webcam('stop');

#### Badge options

Attribute | Default |
--- | --- | ---
bgColor | #d00 | Badge background color
textColor | #fff | Badge text color
fontFamily | sans-serif | Text font family (Arial, Verdana, Times New Roman, serif, sans-serif,...)
fontStyle | bold | Font style (normal, italic, oblique, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900)
type | circle | Badge shape (circle, rectangle)
position | down | Badge position (up, down, left, upleft)
animation | slide | Badge animation type (slide, fade, pop, popFade, none )
elementId | false | Image element ID if there is need to attach badge to regular image
element | false | DOM element where to change "href" attribute (useful in case of multiple link icon elements)

#### Bower

    bower install favico.js

Check out also Tinycon, Notify Better or favicon.js.

#### Roadmap

- More options (Badge position, animations,...)

#### License

All code is open source and dual licensed under GPL and MIT. Check the individual licenses for more information.