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

347

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

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

javascript html dom favicon SqlRyan
источник

41

В фавиконе есть аркадная игра .

Кори Трагер

Обратите внимание, что в динамической реализации Chicic favicon есть ошибки и слишком много ресурсов процессора. См. Code.google.com/p/chromium/issues/detail?id=121333

Brillout,

6

Ссылка для аркадной игры изменена. Это правильный.

Василий

См. Stackoverflow.com/questions/6296574/… о том, как динамически обновлять значок, рисуя поверх шаблона изображения с канвой.

обрабатывать

1

Небольшая ошибка в примере кода приведена в принятом ответе. У меня недостаточно репутации, чтобы комментировать ответы, поэтому пишу здесь. В последней строке меняются скобки:} ()); должен прочесть })(); Было бы неплохо, чтобы пример кода обновлялся, поскольку он, скорее всего, копируется и вставляется другими.

Горан W

396

Почему нет?

(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 должен быть крут с этим.

отредактировано, чтобы правильно переписать существующие значки

keparo
источник

2

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

SqlRyan

34

Так как это все равно не работает в IE, вы можете удалить shortcutиз relатрибута. shortcutнедопустимое отношение ссылок между IE и частной собственностью!

Матиас Биненс

8

Вы также можете легко найти существующую ссылку favicon и обновить ее или заменить.

Кепаро

5

Google может дать вам значок сайта, используя этот URL, заменив stackoverflow.com доменом, который вы хотите: s2.googleusercontent.com/s2/favicons?domain=stackoverflow.com

kirb

5

Должно ли это войти в консоль Javascript в Chrome? Я не могу заставить его менять иконки на разных сайтах.

powerj1984

88

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

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

Матиас Биненс
источник

Ошибка Chrome была исправлена в Chrome 6 (выпущен сен 10), так что взломать Chrome не действительно нужно больше - на самом деле, я настоятельно рекомендую не использовать его , так как он ломает кнопку вперед.

josh3736

Возможно, ошибка Chrome была исправлена, но в 14.0.835.187 она снова сломалась.

Данортон

Демо не работает для меня с Chrome 21 / WinXP.

Хьюго

Демо не работает для меня в Chrome 26 / Win7. document.head || document.head = document.getElementsByTagName('head')[0]; Uncaught ReferenceError: Invalid left-hand side in assignment

Патрик

2

Это работает во всех поддерживаемых в настоящее время браузерах (IE 11, Edge, FF и Chrome), которые невозможно протестировать с помощью safari

Aaron

46

Если у вас есть следующий фрагмент 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 .

fserb
источник

1

Я думаю, что к моменту запуска JS браузер уже увидит ссылку и попытается загрузить favicon.png. Это может быть необходимо сделать на стороне сервера.

Цао

Если вы не используете JQuery, вы можете изменить hrefатрибут #faviconиспользования document.getElementById('favicon').setAttribute('href','favicon2.png') Возможно, вы можете добавить его в свой пост @fserb?

johannchopin

37

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

vorillaz
источник

@pkExec Комбинация этого и ответа keparo выше (выбранный ответ) заставила меня работать как в ff, так и в chrome.

MrShmee

17

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

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")

Михал Перлаковский
источник

11

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

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

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

Джефф Шелдон
источник

1

IIRC, однако, некоторые браузеры (я смотрю в вашу сторону, IE) иногда не очень уважают это.

Мэтью Шинкель

(Я обнаружил, что у меня были лучшие результаты, если файл значка находится в нужном месте, а не в явной ссылке).

Мэтью Шинкель

9

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

криогенный
источник

Ошибка Chrome была исправлена в Chrome 6 (выпущен сен 10), так что взломать Chrome не действительно нужно больше - на самом деле, я настоятельно рекомендую не использовать его , так как он ломает кнопку вперед.

josh3736

Chrome все еще имеет ту же ошибку, хотя и в несколько иных обстоятельствах, чем отмеченная конкретная ошибка. code.google.com/p/chromium/issues/detail?id=99549

Данортон

4

Я бы использовал подход Грега и сделал бы собственный обработчик для 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.

Дэн
источник

1

Мне действительно любопытно, почему за это проголосовали? на самом деле это лучший ответ, учитывая, что все остальные полагаются на сценарии, которые могут или не могут быть доступны.

эфирное

1

@ethermal Потому что это выглядит динамически на стороне сервера. ОП требовал динамизма на стороне клиента.

Алексис Вилке

3

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

Greg
источник

3

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

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

Pepelegal
источник

3

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

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/

max4ever
источник

2

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

Например:

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

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

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

staticsan
источник

гораздо больше, чем это. stackoverflow.com/a/45301651/661584 faqs / info на сайте генератора удивит вас - здесь есть много чего.

MemeDeveloper

3

Сеть сильно меняется за 9 лет.

staticsan

2

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

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

например

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

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

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

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

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

MemeDeveloper
источник

Да, ссылка хорошая. Я думаю, что основная причина, почему эти ответы не работают в IE, заключается в том, что они не используют этот значок по умолчанию <link>, а вместо этого ищут apple-touch-iconили какой-либо другой такой вариант.

Алексис Вилке

1

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

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

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

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

Оскар Неварез
источник

Ссылка и библиотека очень полезны, пожалуйста, предоставьте описание, как это работает, чтобы это также стало правильным ответом на поставленный вопрос.

Дима Тиснек

1

Спасибо @DimaTisnek. Я обновил свой ответ.

Оскар Неварез

0

Я использую эту функцию все время при разработке сайтов ... так что я сразу вижу, на какой вкладке работает local, 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), и все готово.

Раскин
источник

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

Ответы:

Скрипт Tampermonkey

Основной код