• Stars
    star
    5,110
  • Rank 8,134 (Top 0.2 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 13 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A small library for manipulating the favicon, in particular adding alert bubbles and changing images.

Tinycon

A small library for manipulating the favicon, in particular adding alert bubbles and changing images. Tinycon gracefully falls back to a number in title approach for browsers that don't support canvas or dynamic favicons.

See the Live Demo here.

Documentation

Tinycon adds a single object to the global namespace and does not require initialization.

Installation

Install with your favorite package manager.

npm install tinycon --save
yarn add tinycon

Basic Usage

Tinycon.setBubble(6);

Options

Tinycon can take a range of options to customize the look

  • width: the width of the alert bubble
  • height: the height of the alert bubble
  • font: a css string to use for the fontface (recommended to leave this)
  • color: the foreground font color
  • background: the alert bubble background color
  • fallback: should we fallback to a number in brackets for browsers that don't support canvas/dynamic favicons? Boolean, or use the string 'force' to ensure a title update even in supported browsers.
  • abbreviate: should tinycon shrink large numbers such as 1000 to an abbreviated version (1k). Boolean, defaults to true
Tinycon.setOptions({
	width: 7,
	height: 9,
	font: '10px arial',
	color: '#ffffff',
	background: '#549A2F',
	fallback: true
});

AMD support

Tinycon can also be used as an asynchronous module.

require([
	'tinycon.js'
], function (T) {

	T.setOptions({
		width: 7,
		height: 9,
		font: '10px arial',
		color: '#ffffff',
		background: '#549A2F',
		fallback: true
	});

	T.setBubble(7);

});

Browser Support

Tinycon has been tested to work completely in the following browsers. Older versions may be supported, but haven't been tested:

  • Chrome 15+
  • Firefox 9+
  • Opera 11+

Currently the library degrades to title update in the following browsers:

  • Internet Explorer 9
  • Safari 5

Development

To produce the minified file run grunt uglify

License / Credits

Tinycon is released under the MIT license. It is simple and easy to understand and places almost no restrictions on what you can do with Tinycon. More Information

Tinycon was inspired by Notificon

Download

Releases are available for download from GitHub.

More Repositories

1

crumble

Crumble makes it easy to create feature tours in your website or app.
JavaScript
659
star
2

react-emoji-render

Normalize and render emoji's the way your users expect.
JavaScript
337
star
3

emojione-picker

A react emoji picker for use with emojione
JavaScript
261
star
4

electron-lets-move

Automatically move Electron apps to the Applications directory
JavaScript
178
star
5

fastimage

FastImage finds the dimensions or filetype of an image at a url by fetching the least data possible
PHP
163
star
6

HackerNew

The best Chrome extension to make Hacker News quicker and more useful.
JavaScript
125
star
7

fontselect-jquery-plugin

A font selector for the Google Web Fonts api
JavaScript
102
star
8

navigate-jquery-plugin

Allows any group of dom elements to be navigated with the keyboard arrows
JavaScript
16
star
9

tinyrange-jquery-plugin

TinyRange is a small jquery slider plugin that augments the html5 range element
JavaScript
15
star
10

promise-pool

A flexible pool of promises that can be awaited and executed at a chosen level of concurrency
JavaScript
10
star
11

Zap

Zap! is an audio manager for html 5 applications with a focus on real time and interactive applications such as games.
JavaScript
7
star
12

distribute-jquery-plugin

Ensures child elements are horizontally spaced evenly in fluid layouts
JavaScript
6
star
13

mime-names

Media Type Names Database
JavaScript
4
star
14

Testing-Repo

Testing Repository.
JavaScript
4
star
15

annotatey

Draw annotations on any website and save to Dropbox. Hack project for TechCrunch Disrupt 2013
JavaScript
3
star
16

dotfiles

My dotfiles. It's public because it's free, not because you should care.
Ruby
3
star
17

sheffield-js-photobooth

Sample application built for talk on node-webkit at Sheffield.js
JavaScript
2
star
18

personal-api

WIP, framework for anyone to easily build a personal API.
JavaScript
1
star
19

felony

WIP. HTML5 top-down game using box2d
JavaScript
1
star
20

electronguides.github.io

A collection of guides for those building Electron apps
1
star
21

macflix

Mac desktop wrapper for Netflix with all the goodies you'd expect
JavaScript
1
star
22

pulse-jquery-plugin

Animate the DOM using a mediaStream
JavaScript
1
star
23

vagrant-heroku

Ruby
1
star
24

doorman

This script answers my front door
JavaScript
1
star
25

easy-peer-connection

A wrapper library to make PeerConnections in the web browser easy
1
star
26

tommoor.github.io

Personal website
HTML
1
star
27

quantified-chrome

Track your browsing habits
CSS
1
star
28

filecop

Checks filenames against a library of filename rules to find sensitive files
Ruby
1
star
29

forest

Fast, detailed event logging for lithium PHP
1
star