Динамическое изменение значка веб-сайта

Значок объявляется в теге заголовка примерно так:

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

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

Почему нет?

var link = document.querySelector("link[rel~='icon']");
if (!link) {
    link = document.createElement('link');
    link.rel = 'icon';
    document.getElementsByTagName('head')[0].appendChild(link);
}
link.href = 'https://stackoverflow.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 () холста, как это делает Фавикон Защитник.

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

Например:

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

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

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

Вот код, который я использую для добавления поддержки динамических значков в 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');
};

Разветвляйся или посмотреть демо.

Единственный способ сделать это для IE - настроить ваш веб-сервер на обработку запросов * .ico для вызова вашего серверного языка сценариев (PHP, .NET и т. д.). Также настройте * .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.

Версия 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";

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

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 (и других ссылок на файлы - см. ссылку для ответа ниже)
• Просто убедитесь, что сервер отвечает на someUserId с помощью правильный файл изображения (это могут быть правила маршрутизации статический или динамичный серверный код).

например

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

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

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

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

Наслаждаться.

В своих проектах я использую favico.js.

Это позволяет изменить значок на ряд предопределенных форм, а также на пользовательские.

Внутри он использует canvas для рендеринга и URL данных base64 для кодирования значков.

В библиотеке также есть приятные функции: значки значков и анимация; якобы вы даже можете транслировать видео с веб-камеры на значок :)

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

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

Или, если хотите смайлик :)

var canvas = document.createElement("canvas");
canvas.height = 64;
canvas.width = 64;

var ctx = canvas.getContext("2d");
ctx.font = "64px serif";
ctx.fillText("☠️", 0, 64); 

$("link[rel*='icon']").prop("href", canvas.toDataURL());

Реквизит к https://koddsson.com/posts/emoji-favicon/

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

Теперь, когда Chrome поддерживает значки SVG, это значительно упрощает задачу.

Скрипт Tampermonkey

Посмотрите на https://gist.github.com/elliz/bb7661d8ed1535c93d03afcd0609360f скрипт tampermonkey, который указывает на демонстрационный сайт, который я забросил на https://elliz.github.io/svg-favicon/

Базовый код

Адаптировал это из другого ответа ... можно улучшить, но достаточно для моих нужд.

(function() {
    'use strict';

    // play with https://codepen.io/elliz/full/ygvgay for getting it right
    // viewBox is required but does not need to be 16x16
    const svg = `
    <svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 16 16">
      <circle cx = "8" cy = "8" r = "7.2" fill = "gold" stroke = "#000" stroke-width = "1" />
      <circle cx = "8" cy = "8" r = "3.1" fill = "#fff" stroke = "#000" stroke-width = "1" />
    </svg>
    `;

    var favicon_link_html = document.createElement('link');
    favicon_link_html.rel = 'icon';
    favicon_link_html.href = svgToDataUri(svg);
    favicon_link_html.type = 'image/svg+xml';

    try {
        let favicons = document.querySelectorAll('link[rel~ = "icon"]');
        favicons.forEach(function(favicon) {
            favicon.parentNode.removeChild(favicon);
        });

        const head = document.getElementsByTagName('head')[0];
        head.insertBefore( favicon_link_html, head.firstChild );
    }
    catch(e) { }

    // functions -------------------------------
    function escapeRegExp(str) {
        return str.replace(/([.*+?^=!:${}()|\[\]/\\])/g, "\\$1");
    }

    function replaceAll(str, find, replace) {
        return str.replace(new RegExp(escapeRegExp(find), 'g'), replace);
    }

    function svgToDataUri(svg) {
        // these may not all be needed - used to be for uri-encoded svg in old browsers
        var encoded = svg.replace(/\s+/g, " ")
        encoded = replaceAll(encoded, "%", "%25");
        encoded = replaceAll(encoded, "> <", "><"); // normalise spaces elements
        encoded = replaceAll(encoded, "; }", ";}"); // normalise spaces css
        encoded = replaceAll(encoded, "<", "%3c");
        encoded = replaceAll(encoded, ">", "%3e");
        encoded = replaceAll(encoded, "\"", "'"); // normalise quotes ... possible issues with quotes in <text>
        encoded = replaceAll(encoded, "#", "%23"); // needed for ie and firefox
        encoded = replaceAll(encoded, "{", "%7b");
        encoded = replaceAll(encoded, "}", "%7d");
        encoded = replaceAll(encoded, "|", "%7c");
        encoded = replaceAll(encoded, "^", "%5e");
        encoded = replaceAll(encoded, "`", "%60");
        encoded = replaceAll(encoded, "@", "%40");
        var dataUri = 'data:image/svg+xml;charset=UTF-8,' + encoded.trim();
        return dataUri;
    }

})();

Просто вставьте свой собственный SVG (возможно, очищенный с помощью SVGOMG Джейка Арчибальда, если вы используете инструмент) в константу вверху. Убедитесь, что он квадратный (используя атрибут viewBox), и все готово.

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

function changeFavicon(text) {
  const canvas = document.createElement('canvas');
  canvas.height = 64;
  canvas.width = 64;
  const ctx = canvas.getContext('2d');
  ctx.font = '64px serif';
  ctx.fillText(text, 0, 64);

  const link = document.createElement('link');
  const oldLinks = document.querySelectorAll('link[rel = "shortcut icon"]');
  oldLinks.forEach(e => e.parentNode.removeChild(e));
  link.id = 'dynamic-favicon';
  link.rel = 'shortcut icon';
  link.href = canvas.toDataURL();
  document.head.appendChild(link);
}

changeFavicon('❤️');