INSPINIA | Tinycon

Tinycon

A small library for manipulating the favicon

Tinycon allows the addition of alert bubbles and changing the favicon image. Tinycon gracefully falls back to a number in title approach for browsers that don't support canvas or dynamic favicons.

Alerts in the favicon allow users to pin a tab and easily see if their attention is needed.

Set icon to 1 Set icon to 1000 Set icon to string 'In' Set icon with custom color

Options

Tinycon can take a range of options to customise 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)
colour: the foreground font colour
background: the alert bubble background colour
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

Example usage

Tinycon.setBubble(6);

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