如何使用 JavaScript 動態更改網站的 Favicon？

動態變更網站圖示

在 Web 開發領域，自訂使用者體驗通常涉及使網站的外觀與登入使用者的偏好保持一致。可能需要自訂的一方面是網站的圖示。這個微小但有影響力的圖標代表了瀏覽器標籤和書籤中的品牌。

動態變更圖示

根據自有標籤動態變更圖示的任務是一項挑戰。您可能已經設想了一種解決方案，其中涉及儲存一組圖示並在 HTML 頁面生成過程中引用相應的圖示。

JavaScript 來救援

幸運的是，有一個簡單的JavaScript 解決方案可以解決此問題：

在此程式碼中：

• document.querySelector定位現有的 rel 屬性包含字串「icon」的元素。
• 如果沒有找到這樣的元素，則會建立一個新的 。元素被創建，其 rel 屬性設定為“icon”。
• 新建立或檢索的元素被附加到 上。
• 最後， 的 href 屬性元素設定為所需的 favicon 映像的 URL。

透過動態更新 href 屬性，您可以切換瀏覽器標籤或書籤中顯示的 favicon。透過將網站的品牌與活躍用戶的偏好保持一致，可以有效地客製化用戶體驗。

以上是如何使用 JavaScript 動態更改網站的 Favicon？的詳細內容。更多資訊請關注PHP中文網其他相關文章！