A-link hover with favicon

by WebComponents

HTML

<script>
  customElements.define(
    "show-favicon",
    class extends HTMLElement {
      connectedCallback() {
        // the connectedCallback fires on the opening tag! So wait for lightDOM to be parsed!
        setTimeout(() => {
          this.querySelectorAll("a[href*='https']").forEach((a) => {
            let hostname = new URL(a.href).hostname;
            a.style.cursor = `url('https://icons.duckduckgo.com/ip9/${hostname}.ico'),auto`
          })
        })
      }
    }
  )
</script>

<show-favicon>
  <ul>
    <li><a href="https://www.google.com">Google</a></li>
    <li><a href="https://www.linkedin.com">LinkedIn</a></li>
    <li><a href="https://www.cnn.com">CNN</a></li>
    <li><a href="https://www.disney.com">It is magical!</a></li>
    <li><a href="https://edent.tel/">Original Blogpost Author</a></li>
  </ul>
</show-favicon>

<style>
  body { font: 31px Arial }
  li { padding: .5em }
</style>