All Projects → tommoor → Tinycon

tommoor / Tinycon

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

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

Projects that are alternatives of or similar to Tinycon

favloader
Vanilla JavaScript library for loading animation in favicon (favicon loader)
Stars: ✭ 20 (-99.61%)
Mutual labels:  favicon
favicon-canvas-loader
Create and display a circular loading <canvas> animation as a webpage favicon.
Stars: ✭ 83 (-98.37%)
Mutual labels:  favicon
Favicon.js
A tiny (817 bytes) library for changing the favicon
Stars: ✭ 351 (-93.12%)
Mutual labels:  favicon
clappr-plugins
Main plugins for the Clappr project
Stars: ✭ 22 (-99.57%)
Mutual labels:  favicon
favioli
Emoji Favicons for the web. 👊🤯
Stars: ✭ 55 (-98.92%)
Mutual labels:  favicon
favicon
Find a website's favicon.
Stars: ✭ 35 (-99.31%)
Mutual labels:  favicon
ngx-favicon
Angular service to dynamically update the favicon on an app
Stars: ✭ 21 (-99.59%)
Mutual labels:  favicon
Automator Workflows
A collection of Automator workflows (services) that speed up your design / development process. Compatible with LaunchBar 6 and 7 Actions
Stars: ✭ 439 (-91.4%)
Mutual labels:  favicon
favicon
💥 Favicon Generator using Node.js and Imagemagick
Stars: ✭ 33 (-99.35%)
Mutual labels:  favicon
Dont Go
A small client-side library with zero dependencies to change the title and/or favicon of the page when it is inactive. 😌
Stars: ✭ 326 (-93.61%)
Mutual labels:  favicon
saco
A pre customized, express server for single page web apps that aims to be production ready.
Stars: ✭ 22 (-99.57%)
Mutual labels:  favicon
favicon
🖼 An attempt to capture all possible favicons for a web project.
Stars: ✭ 17 (-99.67%)
Mutual labels:  favicon
Chingu-Animal-Icons
How to add these beautiful animals to your webpage
Stars: ✭ 44 (-99.14%)
Mutual labels:  favicon
jekyll-favicon
Favicon generator and tag for Jekyll.
Stars: ✭ 17 (-99.67%)
Mutual labels:  favicon
Keepass Yet Another Favicon Downloader
Yet Another Favicon Downloader for KeePass 2.x
Stars: ✭ 354 (-93.06%)
Mutual labels:  favicon
fav
Embrace favicons the modern way 🚀. Inspired by EvilMartian's blogpost.
Stars: ✭ 22 (-99.57%)
Mutual labels:  favicon
get favicon
Get website's Favicon with PHP
Stars: ✭ 25 (-99.51%)
Mutual labels:  favicon
Besticon
Favicon service written in Go
Stars: ✭ 472 (-90.75%)
Mutual labels:  favicon
Picofeed
PHP library to parse and write RSS/Atom feeds
Stars: ✭ 439 (-91.4%)
Mutual labels:  favicon
Laravel Favicon
Create dynamic favicons based on your environment settings.
Stars: ✭ 276 (-94.59%)
Mutual labels:  favicon

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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].