[javascript] 웹 사이트 favicon을 동적으로 변경

JAVASCRIPT / 글쓴이

현재 로그인 한 사용자에 따라 브랜딩 된 웹 응용 프로그램이 있습니다. 페이지의 즐겨 찾기 아이콘을 개인 레이블의 로고로 변경하고 싶지만 코드 나 방법에 대한 예를 찾을 수 없습니다 이것을하기 위해. 아무도 전에 이것을 성공적으로 했습니까?

폴더에 12 개의 아이콘이있는 것을 상상하고 있으며 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" />

이 링크에서 HREF 요소를 변경하여 Javascript를 사용하여 즐겨 찾기 아이콘을 변경할 수 있습니다 (예 : JQuery를 사용한다고 가정).

$("#favicon").attr("href","favicon2.png");

Favicon Defender 와 마찬가지로 Canvas 요소를 만들고 HREF를 캔버스의 ToDataURL ()로 설정할 수도 있습니다 .

답변

jQuery 버전 :

$("link[rel='shortcut icon']").attr("href", "favicon.ico");

또는 더 나은 :

$("link[rel*='icon']").attr("href", "favicon.ico");

바닐라 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은 다음과 같이 head 태그에 선언됩니다.

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

뷰 데이터에서 원하는 아이콘 이름을 전달하고 헤드 태그에 넣을 수 있습니다.

답변

다음은 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에 대한 크레딧