Динамическое изменение иконки сайта
У меня есть веб-приложение с маркой в соответствии с пользователем, который в данный момент вошел в систему. Я хочу изменить значок страницы на логотип частной метки, но я не могу найти ни кода, ни примеров того, как сделать это. Кто-нибудь успешно делал это раньше?
Я представляю дюжину значков в папке, и ссылка на файл favicon.ico для использования просто генерируется динамически вместе со страницей HTML. Мысли?
18 ответов
Почему бы и нет?
(function() {
var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
link.type = 'image/x-icon';
link.rel = 'shortcut icon';
link.href = 'http://www.stackru.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.
Версия 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.stackru.com/favicon.ico")
Вот фрагмент, чтобы сделать значок смайликом или текстом. Он работает в консоли, когда я нахожусь в 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('❤️');
Фавикон объявлен в теге head что-то вроде:
<link rel="shortcut icon" type="image/ico" href="favicon.ico">
Вы должны быть в состоянии просто передать имя нужного вам значка в данных представления и выбросить его в тег head.
Или если вы хотите смайлик:)
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/
Вот некоторый код, который я использую для добавления поддержки динамических значков в 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.
в большинстве случаев фавикон объявляется так.
<link rel="icon" href"...." />
Таким образом, вы можете получить ссылку на него с помощью this.
const linkElement = document.querySelector('link[rel=icon]');
и вы можете изменить картинку с помощью этого
linkElement.href = 'url/to/any/picture/remote/or/relative';
Единственный способ заставить это работать для IE - настроить ваш веб-сервер для обработки запросов на *.ico для вызова языка сценариев на стороне сервера (PHP, .NET и т. Д.). Также настройте *.ico, чтобы перенаправить на один скрипт и заставить этот скрипт доставить правильный файл favicon. Я уверен, что все еще будут некоторые интересные проблемы с кешем, если вы хотите иметь возможность перебрасывать назад и вперед в одном и том же браузере между различными значками.
Для тех, кто использует jQuery, есть решение в одну строку:
$("link[rel*='icon']").prop("href",'https://www.stackru.com/favicon.ico');
Я использую эту функцию все время при разработке сайтов... поэтому я могу сразу увидеть, на какой вкладке работает локальный, 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), и все готово.
Согласно WikiPedia, вы можете указать, какой файл favicon загружать, используя link тег в head раздел, с параметром rel="icon",
Например:
<link rel="icon" type="image/png" href="/path/image.png">
Я полагаю, что если вы захотите написать динамический контент для этого вызова, у вас будет доступ к файлам cookie, чтобы вы могли таким образом получать информацию о сеансе и представлять соответствующий контент.
Возможно, вам не нравятся форматы файлов (IE, как сообщается, поддерживает только его формат.ICO, в то время как большинство остальных поддерживает изображения PNG и GIF) и, возможно, проблемы с кэшированием как в браузере, так и через прокси. Это произошло бы из-за оригинального предпочтения favicon, в частности, для маркировки закладки мини-логотипом сайта.
Да вполне возможно
- Используйте строку запроса после favicon.ico (и других ссылок на файлы - см. Ссылку на ответ ниже)
- Просто убедитесь, что сервер отвечает на "someUserId" правильным файлом образа (это могут быть статические правила маршрутизации или динамический код на стороне сервера).
например
<link rel="shortcut icon" href="/favicon.ico?userId=someUserId">
Тогда какой бы язык или инфраструктура на стороне сервера вы не использовали, вы легко сможете найти файл на основе userId и обработать его в ответ на этот запрос.
Но чтобы сделать favicons правильно (это действительно очень сложная тема), пожалуйста, посмотрите ответ здесь https://stackru.com/a/45301651/661584
Намного проще, чем прорабатывать все детали самостоятельно.
Наслаждаться.
Тестируя предложенные решения 2021 года на Chrome, я обнаружил, что иногда браузер кэширует фавикон и не показывает изменение, даже если ссылка была изменена.
Этот код работал (аналогично предыдущему предложению, но добавляет случайный параметр, чтобы избежать кэширования)
let oldFavicon = document.getElementById('favicon')
var link = document.createElement('link')
link.id = 'favicon';
link.type = 'image/x-icon'
link.rel = 'icon';
link.href = new_favicon_url +'?=' + Math.random();
if (oldFavicon) {
document.head.removeChild(oldFavicon);
}
document.head.appendChild(link);
Скопировано с https://gist.github.com/mathiasbynens/428626#gistcomment-1809869 на случай, если у кого-то возникнет такая же проблема.