National Public Mania

    favicon-notification

    0.1.4 • Public • Published

    Favicon Notification

    A small script to add notification bubble to favicon

    Demo

    Favicon

    If you don't have a nice favicon set on app, read this: https://github.com/audreyr/favicon-cheat-sheet

    Installing

    NPM:

    Run:

    npm install favicon-notification
    

    Bower

    Run

    bower install favicon-notification
    

    Using

    NPM

    If you are using Webpack or Browserify, do:

    var FaviconNotification = require('favicon-notification');
     
    // When your app loads
    FaviconNotification.init({
      color: '#000000'
    });
     
    // On some event
    FaviconNotification.add();
     
    // If you want to remove the notification
    FaviconNotification.remove();
     

    AMD

    If you are using RequireJS, for example, load normally (remeber to set the alias in your RequireJS config):

    define(['FaviconNotification'], function(FaviconNotification){
      // When your app loads
      FaviconNotification.init({
        color: '#000000'
      });
     
      // On some event
      FaviconNotification.add();
     
      // If you want to remove the notification
      FaviconNotification.remove();
    });

    Bower

    Load the script file:

    <script src="./bower_components/favicon-notification/dist/favicon-notification.min.js"></script>
     
    <script>
    // When your app loads
    FaviconNotification.init({
      color: '#000000'
    });
     
    // On some event
    FaviconNotification.add();
     
    // If you want to remove the notification
    FaviconNotification.remove();
    </script> 

    Methods

    .init(options)

    This script assumes that you have a /favicon.ico set. See how setup your favicon. If are you using another path to your favicon, you can set it by passing some options to this method. You can set a different fill and line color too (defaults are fill red and white line).

    FaviconNotification.init({
      url: '/path/to/favicon.ico',
      color: '#FFFFFF',
      lineColor: '#000000'
    });

    .add()

    As the name says, this add the notification bubble to the favicon. If you didn't initialized the script using .init(options), this will use the default options to create and set the new favicon with the notification.

    FaviconNotification.add();

    .remove()

    FaviconNotification.remove();

    Install

    npm i favicon-notification

    DownloadsWeekly Downloads

    265

    Version

    0.1.4

    License

    MIT

    Last publish

    Collaborators

    • igorprado