tinycon
A small library for manipulating the favicon, in particular adding alert bubbles and changing images.
Top Related Projects
Quick Overview
Tinycon is a small JavaScript library that allows you to dynamically update the favicon of a web page with a number, similar to how many mobile apps show unread counts. It's particularly useful for web applications that want to display notifications or update counts without requiring the user to refresh the page.
Pros
- Easy to implement and use with minimal code
- Supports most modern browsers
- Customizable appearance (background color, font, position)
- Fallback options for unsupported browsers
Cons
- Limited to numerical notifications only
- May not work on all mobile devices
- Potential performance impact if updated too frequently
- Requires canvas support in the browser
Code Examples
Setting a basic favicon badge:
Tinycon.setBubble(7);
Customizing the badge appearance:
Tinycon.setOptions({
background: '#ff0000',
font: '10px arial',
colour: '#ffffff'
});
Tinycon.setBubble(42);
Updating the favicon dynamically:
let count = 0;
setInterval(() => {
count++;
Tinycon.setBubble(count);
}, 1000);
Getting Started
- Include the Tinycon script in your HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinycon/0.6.8/tinycon.min.js"></script>
- Initialize Tinycon with your desired options:
Tinycon.setOptions({
width: 7,
height: 9,
font: '10px arial',
colour: '#ffffff',
background: '#549A2F',
fallback: true
});
- Update the favicon badge as needed:
Tinycon.setBubble(5);
Competitor Comparisons
A tiny javascript library for generating progress pie charts in your favicon.
Pros of piecon
- Supports pie chart-style favicon updates, allowing for more visual information
- Includes options for customizing pie chart colors and background
- Provides a fallback text option for browsers that don't support canvas
Cons of piecon
- Slightly more complex API compared to tinycon
- May require more processing power for rendering pie charts
- Limited to circular progress indicators
Code Comparison
tinycon:
Tinycon.setOptions({
width: 7,
height: 9,
font: '10px arial',
colour: '#ffffff',
background: '#549A2F',
fallback: true
});
Tinycon.setBubble(42);
piecon:
Piecon.setOptions({
color: '#ff0000',
background: '#bbb',
shadow: '#fff',
fallback: 'force'
});
Piecon.setProgress(42);
Both libraries offer similar functionality for updating favicons with dynamic information. tinycon focuses on simple numeric badges, while piecon provides pie chart-style progress indicators. tinycon's API is slightly simpler, but piecon offers more customization options for its visual style. The choice between the two depends on the specific needs of the project and the desired visual representation of the favicon updates.
Make use of your favicon with badges, images or videos
Pros of favico.js
- More feature-rich, offering animations, badges, and video support
- Provides a wider range of customization options for favicon manipulation
- Supports multiple browsers and devices, including mobile
Cons of favico.js
- Larger file size, which may impact page load times
- More complex API, potentially requiring a steeper learning curve
- May be overkill for simple favicon updates
Code Comparison
favico.js:
var favicon = new Favico({
animation:'slide',
bgColor : '#d00',
textColor : '#fff',
});
favicon.badge(5);
tinycon:
Tinycon.setOptions({
width: 7,
height: 9,
font: '10px arial',
colour: '#ffffff',
background: '#549A2F'
});
Tinycon.setBubble(5);
Both libraries allow for setting favicon badges, but favico.js offers more customization options and animations. tinycon provides a simpler API for basic favicon updates, which may be sufficient for many use cases. The choice between the two depends on the specific requirements of the project, with favico.js being more suitable for complex favicon manipulations and tinycon for simpler, lightweight implementations.
Convert 
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
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.
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.
Top Related Projects
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot