onassar / JavaScript-FaviconStamping

A small JavaScript class which modifies selected HTML elements to have them stamped with their appropriate favicon.

JavaScript-FaviconStamping

In my admin (and other) interfaces, I like to put a little favicon next to links in order to quickly identify them. Therefore, I thought a small JavaScript library that would inject favicons (from DuckDuckGo at the moment) could be useful for others.

And thus we have JavaScript-FaviconStamper.

Simple goals:

• Lookup HTMLElements that match the config selectors
• Check the href value for those elements (presumably HTMLAnchorElements)
• Grab the hostname for that HTMLElement
• Make some space for a favicon
• Set the background-image (and other relevant properties) for the elemtn

Usage

Usage:

FaviconStamper.init();

Code: Before

<a href="https://olivernassar.com/" class="favicon">Oliver Nassar</a>

Code: After

<a href="https://olivernassar.com/" class="favicon" style="background-image: url("https://icons.duckduckgo.com/ip3/olivernassar.com.ico"); background-repeat: no-repeat; padding-left: 20px; background-size: auto 75%; background-position: left center;">Oliver Nassar</a>

UI

Before	After