---
{
	"title": "Favicon",
	"language": "en",
	"category": "Plugins",
	"description": "This plugin provides the ability to add and update the favicon's on a web page.",
	"tag": "favicon",
	"parentdir": "favicon",
	"altLangPrefix": "favicon",
	"dateModified": "2014-02-19"
}
---

<p>This plugin provides the ability to add and update the favicon's on a web page. Its default behaviour is to add a mobile favicon to web pages that have a favicon defined by a <code>&lt;link rel="icon" type="image/x-icon"&gt;</code> element.</p>
<p>The mobile favicon's file name, rel, path and sizes can be set with <code>data</code> attributes on the <code>&lt;link rel="icon" type="image/x-icon"&gt;</code>:</p>

<ul>
	<li><strong>data-filename:</strong> filename of the mobile favicon (defaults to "favicon-mobile.png"). This will be appended to the favicon's path.</li>
	<li><strong>data-path:</strong> path to the mobile favicon (defaults to using the same path as the icon).</li>
	<li><strong>data-rel:</strong> rel attribute of the mobile favicon (defaults to "apple-touch-icon").</li>
	<li><strong>data-sizes:</strong> <code>sizes</code> attribute of the mobile favicon (defaults to "57x57 72x72 114x114 144x144 150x150").</li>
</ul>

<p>For example, the following overrides the <code>rel</code> and <code>filename</code> attributes of the mobile favicon:</p>

<code class="prettyprint">&lt;link href="favion.ico" rel="icon" type="image/x-icon" data-filename="my-mobile-favicon.ico" data-rel="apple-touch-icon-precomposed"&gt;</code>