Oliver Nassar

Favicon Stamping (JavaScript Class)

June 01, 2022

I like building dashboards for the various products I build. A common technique (that I'm sure I borrowed from another platform) that I like to employ is that on these dashboard pages, when I link out to other resources (eg. developer platforms, Google Sheets to help manage a product, etc), I want to drop in the favicon for the host.

Mainly, it helps me visually identify the 3rd party link so that I can quickly navigate it.

It became a bit tedious to do this, so I wrote a small JavaScript class to do that for me. Below you'll see some examples of the script in action (since I make use of it on this site), as well as the code required for it.

It's been open sourced, and is available on GitHub.


Sample Links


Implementation Code

FaviconStamper.init();

Favicon Providers

At the moment, it's setup to use DuckDuckGo as the provider for favicons, however it has the ability to use either Google or 1Password's favicon API as well (in progress).

Enjoy :)


References