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

Question

У меня есть веб-приложение с маркой в ​​соответствии с пользователем, который в данный момент вошел в систему. Я хочу изменить значок страницы на логотип частной метки, но я не могу найти ни один код или примеры того, как это сделать. Кто-нибудь успешно делал это раньше?

Я представляю дюжину значков в папке, и ссылка на используемый файл favicon.ico генерируется динамически вместе со страницей HTML. Мысли

Answer 1

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

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/

Answer 2

Да, вполне возможно

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

например.

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

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

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

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

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

Answer 3

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

Например:

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

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

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

Answer 4

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

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

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

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