Recommend this page to a friend!
  Classes of Thomas Björk   jQuery Load Favicon   Download  
Role: Documentation
Content type: text/markdown
Description: Documentation
Class: jQuery Load Favicon
jQuery plugin to load an image as page favicon
Author: By
Last change: Added functions to convert an image to canvas, store data in webStorage.
Added animations to favicons
Date: 2 years ago
Size: 4,423 bytes


Class file image Download


JUtils is a javascript library for jQuery with loads of small useful utilities.


These functions is attached to jQuerys selector.


Load an image and use it as a favicon in the browser.

Loads images found by the jQuery-selector and converts them into a favicon which is inserted into the documents head. If multiple elements are found then it is up to the browser to select which favicon to use. (The browser might use the first available favicon or, most likely, the last defined icon. This is entirely up to the browser and its internal design.)


Adds images that matches the given selector to the animation list for the favicon.

If the options object has the property "start" set to true then the animation starts directly. The options property "delay" specifies the interval between each image. This is given in milliseconds.

To change the delay just call jQuery.faviconAnimationStart(newDelay); where "newDelay" is the new interval to use.


Set to true to start the interval directly.

If start is omitted or set to false then the animation can be started by calling jQuery.faviconAnimationStart();


Sets the delay for the update interval. This time is specified in milliseconds. When the interval gets too low then the favicon will flicker and you will not get a proper result.


Loads images found by the jQuery-selector (selector1) and converts them to canvas elements. These are attached to the object specified by the selector called selector2.


These functions can be reached from the jQuery-object itself without specifying a selector.


This function loads an image to a internal canvas object and transform it to a png which is used as an favicon.

Load an image from the specified URL and use it as an favicon.


Adds an image to the animationList to create an animated favicon.


Start looping the images in the animationList. The delay specified is the time between shifting images for the favicon.

If the delay, which is measured in milliseconds, is to small then the favicon will start to flicker and you will not get the intended result.

If this function is called a second time then it will only set the delay once again. This makes it possible to change the delay efter the animation has been started.


Stop an ongoing favicon animation.


Load an image from the specified URL and convert it into a canvas object. The returned object is an jQuery object containing the canvas object.

Returns which engine is used. Currently there are three valid values (localStorage, sessionStorage, local).


The internal localStorage is used. Any value set here will remain until removed or until it moves beyond the timeout.


The internal sessionStorage is used. Any value here will remain until the session expires or until it moves beyond the timeout.


The browser doesn't support any webStorage so the data is stored in an object as key-value pairs. Any value here will be lost when the page reloads or when it moves beyond the timeout.

Gets the value for the specified key from storage.

If the key is invalid than the function returns null., value, timeout)

Set the key to value in the storage.

The timeout specifies for how long the key is valid in the storage. This time is given in seconds. If the timeout is omitted then the timesout defaults to 3600 seconds.

Checks if the value for the given key is valid in storage.

Removes the value for the given key from storage., timeout)

Refreshes the the timeout for the given key with a new timeout defined in seconds by the argument named timeout. If this argument for the timeout is omitted then the default timeout of 3600 seconds is used.

Returns the time left until the value for the given key gets invalid.

If the key is missing or invalid then this function returns false.