假設您的 HTML 看起來像這樣：

<ul>

  <li class="link"><a href="https://google.com">Google.com</a></li>

  <li class="link"><a href="https://stackoverflow.com">Stackoverflow.com</a></li>

  <li class="link"><a href="https://example.com">Example.com</a></li>

</ul>

您可以添加腳本標記并循環遍歷列表中的每個項目，將標準 favicon 文件名 (favicon.ico) 附加到該項目的 url，然后使用該 url 作為源創建一個圖像元素

例子：

<ul>

  <li class="link"><a href="https://google.com">Google.com</a></li>

  <li class="link"><a href="https://stackoverflow.com">Stackoverflow.com</a></li>

  <li class="link"><a href="https://example.com">Example.com</a></li>

</ul>

<script>

  for (let element of document.getElementsByClassName("link")) {

    var faviconImage = document.createElement("img");

    faviconImage.src = element.children[0].href + "/favicon.ico";

    faviconImage.classList = "faviconImage";

    element.appendChild(faviconImage)

  }

</script>

您可以使用 Google 圖標抓取工具：

<a href="https://stackoverflow.com">

  Stackoverflow.com

  <img src="https://www.google.com/s2/favicons?domain=stackoverflow.com">

</a>

以下代碼會將網站圖標添加到所有鏈接（內部鏈接或非 http 鏈接除外）之前，這些鏈接均包裝在帶有favicon類的父容器內。

此外，就速度而言，最好使用 Google 的圖標抓取器，而不是像 Lebster 在他的回答中所示手動從每個域中抓取它。

var host = window.location.host;

var links = document.querySelectorAll('.favicon a');

var googleFaviconGrabber = "https://www.google.com/s2/favicons?domain=";

for (i = 0; i < links.length; i++) {

  var link = links[i];

  // Skip all internal links and non HTTP links

  if (link.href.match("^https?://") && !link.href.match(host)) {

    var domain = link.href.split("/");

    // Apply some CSS styles to the hyperlinks

    link.style.background = "url(" + googleFaviconGrabber + domain[2] + ") center left no-repeat";

    link.style.fontWeight = "bold";

    link.style.padding = "5px 5px 5px 20px";

    link.style.textDecoration = "underline";

  }

}

<div class="favicon">

  This demo shows how to add favicons to external links using javascript. Check out this link to

  <a href="https://codegena.com">Codegena</a>.

  <ul>

    <li> <a href="https://css-tricks.com/">CSS Tricks</a></li>

    <li><a href="https://google.in">Google</a></li>

    <li><a href="http://unheap.com">Unheap</a></li>

    <li><a href="http://www.canva.com/">Canva</a></li>

  </ul>

</div>