ExternalFavicon v1.5

Update 5: This plugin now uses the data- attribute instead of the class attribute to define absolute links to alternate images.

Update 4: Ability to specify the favicon image size. I've changed the way the favicon is displayed, it used to be set as the <a> background image but now that I'm seeing sites (ex. twitter) using larger favicons I felt that using an actual image tag would be best in order to keep all favicon images the same size. So now instead of applying the favicon to the <a> background the <a> is wrapped in a span tag and the image is injected into this span with the <a> allowing you to set a specific size of the image via CSS.

Update 3: Now checks for https external links as well.

Update 2: You can now specify a specific location to look for a favicon per link, via a class naming convention: favicon[http://full.path.to/the/image.png].

Update 1: This plugin is now Packager compatible and will now look in the subdomain root dir if the external link points to a link with a subdomain.

Goes out and grabs a site's favicon and adds it to the left of the external link. As of now this plugin will only get the favicon IF it is located at the root folder AND is using the standard naming convention "favicon"


Michael Russell
Current version
GitHub Issues



  • _self_/_current_:
    • Core/Element
    • More/URI
    • More/Assets

How to use


// You can execute from the body to get all external favicons on the page.

// You can add a prefix to the internal class names applied to the span wrapper
// and image to prevent class name conflicts
// result would be: <span class="myPrefix-favicon-wrapper"/>, <img class="myPrefix-favicon-img"/>

// *Note* If you add a space at the end of the class name you can apply it as another class instead
// of a prefix to the internal class name
$(document.body).getFavicons('newClass ');
// result would be: <span class="newClass favicon-wrapper"/>, <img class="newClass favicon-img"/>

//You can add an array of image extensions that you wish to check for from external sites
//By default it will try to find a ico, bmp, gif, or png file.
$(document.body).getFavicons( null, ['png','ico'] );

HTML - Before favicon function is applied

<a href="http://www.google.com"></a><br />
<a href="http://www.flickr.com"></a><br />
<a href="http://www.twitter.com"></a><br />

<!-- overriding the default behavior by applying a specific location to get the favicon from -->
<a data-linkUrl="http://github.com/subhaze/mootools-external-favicon/raw/master/me.png" href="http://github.com/subhaze">github.com/subhaze</a>

HTML - After favicon function is applied

<span class="favicon-wrapper">
    <img src="http://www.google.com/favicon.ico" class="favicon-img">
    <a href="http://www.google.com">google.com</a>
<span class="favicon-wrapper">
    <img src="http://www.flickr.com/favicon.ico" class="favicon-img">
    <a href="http://www.flickr.com">flickr.com</a>
<span class="favicon-wrapper">
    <img src="http://www.twitter.com/favicon.ico" class="favicon-img">
    <a href="http://www.twitter.com">twitter.com</a>

<!-- overriding the default behavior by applying a specific location to get the favicon from -->
<span class="favicon-wrapper">
    <img src="http://github.com/subhaze/mootools-external-favicon/raw/master/me.png" class="favicon-img">
    <a data-linkUrl="http://github.com/subhaze/mootools-external-favicon/raw/master/me.png" href="http://github.com/subhaze">github.com/subhaze</a>


/* adjust styling of favicon image */
.favicon-img {
/* adjust styling of span wrapper if needed */
.favicon-wrapper {}


A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.

blog comments powered by Disqus