У меня есть веб-приложение, которое заклеймилось в соответствии с пользователем, который в настоящее время вошел в систему. Я хотел бы изменить значок страницы, чтобы быть логотипом частного ярлыка, но я не могу найти какой-либо код или какой-либо примеры того, как это сделать. Кто-нибудь успешно сделал это раньше?
Я представляю наличие дюжины значков в папке, а ссылка на который файл favicon.ico для использования генерируется динамически вместе с HTML-страницей. Мысли?
Почему бы и нет?
(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 должно быть круто.
отредактировано, чтобы правильно перезаписать существующие значки
Вот некоторый код, который работает в 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";
Более современный подход:
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")
Фэйвикон объявляется в заголовке с чем-то вроде:
<link rel="shortcut icon" type="image/ico" href="favicon.ico">
Вы должны иметь возможность просто передать имя значка, который вы хотите, в данные просмотра и вставить его в главный тег.
Вот некоторый код, который я использую для добавления поддержки динамического 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 для кода, на котором я основывался.)
Я бы использовал подход Грега и сделал специальный обработчик для 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 для перенаправления на один script и установите script правильный файл favicon. Я уверен, что все еще будут какие-то интересные проблемы с кешем, если вы хотите иметь возможность возвращаться туда и обратно в одном браузере между разными значками.
В соответствии с WikiPedia вы можете указать, какой файл favicon загружается с помощью тега link в разделе head с параметром rel="icon".
Например:
<link rel="icon" type="image/png" href="/path/image.png">
Я предполагаю, что если вы хотите написать динамический контент для этого вызова, у вас будет доступ к файлам cookie, чтобы вы могли получить информацию о сеансе таким образом и представить соответствующий контент.
Вы можете ошибаться в форматах файлов (по сообщениям, IE поддерживает только формат .ICO, в то время как большинство остальных поддерживает изображения PNG и GIF) и, возможно, проблемы с кешированием, как в браузере, так и через прокси. Это было бы из-за оригинальной маркировки значка, в частности, для маркировки закладки с мини-логотипом сайта.
Да полностью возможно
например.
<link rel="shortcut icon" href="/favicon.ico?userId=someUserId">
Тогда любой используемый вами серверный язык/фреймворк на стороне сервера должен легко найти файл на основе userId и выполнить его в ответ на этот запрос.
Но для правильной работы favicons (на самом деле это сложный объект действительно), пожалуйста, см. ответ здесь fooobar.com/questions/14839/...
Намного проще, чем самостоятельно разобрать все детали.
Enjoy.
Для тех, кто использует 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/
Вы можете сделать это:
function changeicon(x){
document.head.innerHTML = "<link href='" + x + "' rel='shortcut icon'><title>" + document.title;
}
changeicon("mycoolicon.png");
Я сделал это, и он работал нормально.
Я использую favico.js в моих проектах:)