我有一個根據當前登陸用戶進行品牌標記的Web應用程序。我想將頁面的圖標更改成自有品牌的徽標，可是我找不到任何代碼或任何示例，去作這個。 之前有人成功作到過嗎？

我正在想象一個文件夾中有十二個圖標，而且要使用的favicon.ico文件的引用是隨HTML頁面一塊兒動態生成的。 有什麼想法嗎？

---

#1樓

jQuery版本：

$("link[rel='shortcut icon']").attr("href", "favicon.ico");

甚至更好：

$("link[rel*='icon']").attr("href", "favicon.ico");

香草JS版本：

document.querySelector("link[rel='shortcut icon']").href = "favicon.ico";

document.querySelector("link[rel*='icon']").href = "favicon.ico";

---

#2樓

圖標在head標籤中聲明，以下所示：

<link rel="shortcut icon" type="image/ico" href="favicon.ico">

您應該只須要在視圖數據中傳遞所需圖標的名稱，而後將其扔到head標籤中便可。

---

#3樓

爲何不？

(function() {
    var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
    link.type = 'image/x-icon';
    link.rel = 'shortcut icon';
    link.href = 'http://www.stackoverflow.com/favicon.ico';
    document.getElementsByTagName('head')[0].appendChild(link);
})();

Firefox應該很棒。

編輯以正確覆蓋現有圖標

---

#4樓

若是您具備如下HTML代碼段：

<link id="favicon" rel="shortcut icon" type="image/png" href="favicon.png" />

例如，您能夠經過更改此連接上的HREF元素來使用Javascript更改收藏夾圖標（假設您使用的是JQuery）：

$("#favicon").attr("href","favicon2.png");

您也能夠建立Canvas元素並將HREF設置爲畫布的ToDataURL（），就像Favicon Defender同樣。

---

#5樓

根據WikiPedia的介紹 ，您可使用head區域中的link標籤（參數rel="icon"指定要加載的收藏夾文件。

例如：

<link rel="icon" type="image/png" href="/path/image.png">

我想若是您想爲該呼叫編寫一些動態內容，則能夠訪問cookie，以即可以以這種方式檢索會話信息並顯示適當的內容。

您可能會碰到文件格式（聽說IE僅支持.ICO格式，而其餘大多數人都支持PNG和GIF圖像），而且可能在瀏覽器和代理上存在緩存問題。 這是由於favicon最初的意圖，特別是用站點的迷你徽標標記書籤的緣由。