Сайт фавикон меняется динамически

вот код, который работает в 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');
};

вилка от или посмотреть демо.

Если у вас есть следующий фрагмент HTML:

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

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

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

вы также можете создать элемент Canvas и установить HREF как ToDataURL () холста, так же, как Favicon Defender делает.

версия jQuery:

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

или еще лучше:

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

версия Vanilla JS:

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

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

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

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 для кода, на котором я основал это.)

фавикон объявляется в теге head с чем-то вроде:

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

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

более современный подход:

const changeFavicon = link => {
  let $favicon = document.querySelector('link[rel="icon"]')
  // If a <link rel="icon"> element already exists,
  // change its href to the given link.
  if ($favicon !== null) {
    $favicon.href = link
  // Otherwise, create a new element and append it to <head>.
  } else {
    $favicon = document.createElement("link")
    $favicon.rel = "icon"
    $favicon.href = link
    document.head.appendChild($favicon)
  }
}

затем вы можете использовать его как это:

changeFavicon("http://www.stackoverflow.com/favicon.ico")

Я бы использовал подход Грега и сделал пользовательский обработчик для favicon.ico Вот (упрощенный) обработчик, который работает:

using System;
using System.IO;
using System.Web;

namespace FaviconOverrider
{
    public class IcoHandler : IHttpHandler
    {
    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "image/x-icon";
        byte[] imageData = imageToByteArray(context.Server.MapPath("/ear.ico"));
        context.Response.BinaryWrite(imageData);
    }

    public bool IsReusable
    {
        get { return true; }
    }

    public byte[] imageToByteArray(string imagePath)
    {
        byte[] imageByteArray;
        using (FileStream fs = new FileStream(imagePath, FileMode.Open, FileAccess.Read))
        {
        imageByteArray = new byte[fs.Length];
        fs.Read(imageByteArray, 0, imageByteArray.Length);
        }

        return imageByteArray;
    }
    }
}

затем вы можете использовать этот обработчик в разделе httpHandlers веб-конфигурации в IIS6 или использовать функцию "сопоставления обработчиков" в IIS7.

единственный способ сделать эту работу для IE-это настроить веб-сервер для обработки запросов на *.ico для вызова вашего языка сценариев на стороне сервера (PHP, .NET и т. д.). Также настройка *.ico для перенаправления на один скрипт и чтобы этот скрипт доставлял правильный файл favicon. Я уверен, что все еще будут некоторые интересные проблемы с кэшем, если вы хотите иметь возможность отскакивать назад и вперед в одном браузере между различными фавиконами.

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

например:

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

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

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

вполне возможно

• использовать querystring после фавикона.ico (и другие ссылки на файлы - см. ссылку на ответ ниже)
• просто убедитесь, что сервер отвечает на" someUserId " с помощью правильный файл изображения (это может быть статический правила маршрутизации, или динамический код на стороне сервера).

например

<link rel="shortcut icon" href="/favicon.ico?userId=someUserId">

затем любой язык на стороне сервера / рамки вы используете должны легко быть в состоянии найти файл на основе идентификатора пользователя и подавать его в ответ на запрос.

но делать фавиконы правильно (на самом деле это действительно сложная тема) пожалуйста, смотрите ответ здесь https://stackoverflow.com/a/45301651/661584

намного проще чем проработать все детали самостоятельно.

наслаждайтесь.

есть одно решение для тех, кто использует jQuery:

$("link[rel*='icon']").prop("href",'https://www.stackoverflow.com/favicon.ico');

Я использую favico.js в моих проектах :)