Изменение веб-сайта favicon динамично

Согласно Википедия , можно определить который favicon файл загрузить использование эти link тег в эти head раздел с параметром rel="icon".

, Например:

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

я воображаю, хотели ли Вы записать некоторый динамический контент для того вызова, у Вас был бы доступ к cookie, таким образом, Вы могли получить свою информацию о сессии тот путь и представить соответствующее содержание.

можно ссориться с форматами файлов (IE по сообщениям только поддерживает, это - формат.ICO, пока большинство все остальные поддерживают PNG и изображения GIF), и возможно кэширующиеся проблемы, и на браузере и через прокси. Это было бы из-за исходного itention favicon а именно, для маркировки закладки с мини-логотипом сайта.

favicon объявляется в главном теге с чем-то как:

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

необходимо быть в состоянии просто передать название значка, который Вы хотите вперед в данных представления и бросаете их в главный тег.

Если у Вас есть следующий отрывок HTML:

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

можно изменить favicon использование JavaScript путем изменения элемента HREF на этой ссылке, например (предполагающий использование JQuery):

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

можно также создать элемент Холста и установить HREF как ToDataURL () холста, во многом как , Защитник Favicon делает.

Вот код, который я использую для добавления поддержки динамических фавиконов в Opera, Firefox и Chrome. Однако я не смог заставить работать IE или Safari. В принципе, Chrome позволяет динамические фавиконы, но он обновляет их только при изменении местоположения страницы (или iframe и т.д. в ней), насколько я могу судить:

var IE = navigator.userAgent.indexOf("MSIE")!=-1
var favicon = {
    change: function(iconURL) {
        if (arguments.length == 2) {
            document.title = optionalDocTitle}
        this.addLink(iconURL, "icon")
        this.addLink(iconURL, "shortcut icon")

        // Google Chrome HACK - whenever an IFrame changes location 
        // (even to about:blank), it updates the favicon for some reason
        // It doesn't work on Safari at all though :-(
        if (!IE) { // Disable the IE "click" sound
            if (!window.__IFrame) {
                __IFrame = document.createElement('iframe')
                var s = __IFrame.style
                s.height = s.width = s.left = s.top = s.border = 0
                s.position = 'absolute'
                s.visibility = 'hidden'
                document.body.appendChild(__IFrame)}
            __IFrame.src = 'about:blank'}},

    addLink: function(iconURL, relValue) {
        var link = document.createElement("link")
        link.type = "image/x-icon"
        link.rel = relValue
        link.href = iconURL
        this.removeLinkIfExists(relValue)
        this.docHead.appendChild(link)},

    removeLinkIfExists: function(relValue) {
        var links = this.docHead.getElementsByTagName("link");
        for (var i=0; i<links.length; i++) {
            var link = links[i]
            if (link.type == "image/x-icon" && link.rel == relValue) {
                this.docHead.removeChild(link)
                return}}}, // Assuming only one match at most.

    docHead: document.getElementsByTagName("head")[0]}

Чтобы изменить фавикон, просто favicon.change("ICON URL"), используя вышеприведенный код.

(кредиты http://softwareas.com/dynamic-favicons за код, на котором я основывался)

Вот код, который работает в Firefox, Opera и Chrome (в отличие от всех остальных ответов, размещенных здесь). Вот еще одна демонстрация кода, которая работает и в IE11 . Следующий пример может не работать в Safari или Internet Explorer.

/*!
 * Dynamically changing favicons with JavaScript
 * Works in all A-grade browsers except Safari and Internet Explorer
 * Demo: http://mathiasbynens.be/demo/dynamic-favicons
 */

// HTML5™, baby! http://mathiasbynens.be/notes/document-head
document.head = document.head || document.getElementsByTagName('head')[0];

function changeFavicon(src) {
 var link = document.createElement('link'),
     oldLink = document.getElementById('dynamic-favicon');
 link.id = 'dynamic-favicon';
 link.rel = 'shortcut icon';
 link.href = src;
 if (oldLink) {
  document.head.removeChild(oldLink);
 }
 document.head.appendChild(link);
}

Затем вы можете использовать его следующим образом:

var btn = document.getElementsByTagName('button')[0];
btn.onclick = function() {
 changeFavicon('http://www.google.com/favicon.ico');
};

Разветвите или просмотрите демонстрацию .