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
HTMLElement
s that match theconfig
selectors - Check the
href
value for those elements (presumablyHTMLAnchorElement
s) - Grab the
hostname
for thatHTMLElement
- 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 |
---|---|