Favicon

WET v4.0 or later

This feature is exclusive to WET v4.0 or later.

Questions or comments?

Purpose

This plugin provides the ability to add and update a web page's favicon.

Use when

Working example

English example

French example

How to implement

Add a mobile favicon:

  1. Add a favicon to the web page using a link element: 
    <link href="favion.ico" rel="icon" type="image/x-icon">
  2. Optionally specify the mobile favion's filename, path, rel attribute and sizes attribute: 
    <link href="favion.ico" rel="icon" type="image/x-icon" 
	data-filename="my-mobile-favicon.ico" 
	data-path="/path/to/favicon/"
	data-rel="apple-touch-icon-precomposed"
	data-sizes="57x57">

Update an existing favicon's href attribute:

  1. Using JavaScript, get a reference to the favicon's link element: 
    var $favicon = $( "link[rel='icon']" );
  2. Trigger the icon.wb-favicon event on the favicon element: 
    $favicon.trigger( "icon.wb-favicon" );
    Note: the update of the favicon's href attribute will be based on its data-path and data-filename attributes.

Configuration options

All configuration options of the plugin are controlled with data attributes:

Option Description How to configure Values
data-filename Filename of the mobile favicon. It is appended to the favicon's path (specified by data-path). Set to the filename of the mobile favicon.
None (default):
If not specified, defaults to "favicon-mobile.png"
String (favicon filename):
Custom mobile favicon filename.
data-path Full path to the mobile favicon. Set to the full path of the mobile favicon.
None (default):
If not specified, defaults to the same path as the <link> icon
String (favicon path):
Custom mobile favicon path.
data-rel Favicon rel attribute. Set to the desired rel attribute value of the favicon.
None (default):
If not specified, defaults to "apple-touch-icon"
String (favicon rel attribute):
Custom mobile favicon rel attribute.
data-sizes Favicon sizes attribute. Set to the desired sizes attribute value of the favicon.
None (default):
If not specified, defaults to "57x57 72x72 114x114 144x144 150x150"
String (favicon sizes attribute):
Custom mobile favicon sizes attribute.

Events

Document the public events that can be used by implementers or developers.

Event Trigger What it does
wb-init.wb-favicon Triggered manually. Initializes the plugin and creates a mobile favicon if it doesn't already exist. Note: the favicon plugin will be initialized automatically unless the link element is added after the page has already loaded.
mobile.wb-favicon Triggered manually and during plugin initialization. Adds or updates the mobile favicon on the web page. This will only update a mobile favicon that was added by the plugin.
icon.wb-favicon Triggered manually. Updates the favicon's href attribute based on its data-filename and data-path attributes.

Source code

Favicon source code on GitHub

Date modified: