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

347

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

폴더에 12 개의 아이콘이있는 것을 상상하고 있으며 favicon.ico 파일에 대한 참조가 HTML 페이지와 함께 동적으로 생성됩니다. 생각?

javascript  html  dom  favicon 
— SqlRyan
소스
41
파비콘 에는 아케이드 게임 이 있습니다 .
— Corey Trager
Chrome의 동적 파비콘 구현은 버그가 많으며 CPU를 너무 많이 사용합니다. 참조 code.google.com/p/chromium/issues/detail?id=121333을
— brillout
6
아케이드 게임의 링크가 변경되었습니다. 이것이 맞습니다.
— 바질
캔버스로 템플릿 이미지 위에 그려서 즐겨 찾기 아이콘을 동적으로 업데이트하는 방법에 대해서는 stackoverflow.com/questions/6296574/… 를 참조하십시오 .
— 핸들
1
허용 된 답변에 제공된 코드 예제의 작은 버그. 답변에 대해 언급 할만한 평판 점수가 충분하지 않으므로 여기에 쓰십시오. 마지막 줄에는 괄호가 바뀌 었습니다.} ()); 읽어야합니다 })(); 코드 예제는 다른 사람들이 복사하여 붙여 넣을 가능성이 높으므로 업데이트되는 것이 좋습니다.
— Goran 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는 멋지다.

기존 아이콘을 올바르게 덮어 쓰도록 편집

— 케파로
소스
2
나는 이것이 내가 찾고있는 것에 가깝다고 생각하지만 데이터베이스에서 적절한 HREF를 어떻게 얻습니까? 자바 스크립트에서 서버 조회를 수행해야한다고 가정하지만 너무 복잡해지기를 원하지 않습니다. 팁 고마워.
— SqlRyan
34
이것은 IE에서 작동하지 않으므로 속성 shortcut에서 제거 할 수 있습니다 rel. shortcut잘못된 IE 독점 링크 관계입니다!
— Mathias Bynens
8
기존 파비콘 링크를 쉽게 찾아 업데이트하거나 교체 할 수 있습니다.
— keparo
5
Google은이 URL을 사용하여 stackoverflow.com을 원하는 도메인으로 대체하여 사이트의 즐겨 찾기 아이콘을 제공
— kirb
5
Chrome의 Javascript 콘솔에 이것을 입력해야합니까? 그런 식으로 여러 사이트에서 파비콘을 변경할 수는 없습니다.
— 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');
};

포크를 하거나 데모를보십시오 .

— 마티아스 비 넨스
소스
크롬 버그 는 앞으로 버튼을 나누기 때문에 사실, 난 강력하게 그것을 사용하지 않는 게 좋을 것 - 크롬 해킹이 더 이상 정말 필요하지 않습니다 그래서 크롬 6 (발표 9월 10일)에서 수정되었습니다.
— josh3736
Chrome 버그가 수정되었을 수 있지만 14.0.835.187에서 다시 손상되었습니다.
— danorton
데모는 크롬 21 / WINXP와 나를 위해 작동하지 않습니다.
— 휴고
Chrome 26 / Win7에서 데모가 작동하지 않습니다. document.head || document.head = document.getElementsByTagName('head')[0]; Uncaught ReferenceError: Invalid left-hand side in assignment
— Patrick
2
이것은 현재 지원되는 모든 브라우저 (IE 11, Edge, FF 및 Chrome)에서 사파리로 테스트 할 수 없음
— Aaron
46

다음 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 ()로 설정할 수도 있습니다 .

— fserb
소스
1
JS가 실행될 때 브라우저는 이미 링크를보고로드하려고 시도했을 것 favicon.png입니다. 이것은 서버 측에서 수행해야 할 수도 있습니다.
— cHao
당신이 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");

바닐라 JS 버전 :

document.querySelector("link[rel='shortcut icon']").href = "favicon.ico";

document.querySelector("link[rel*='icon']").href = "favicon.ico";
— 보 릴라 즈
소스
@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

favicon은 다음과 같이 head 태그에 선언됩니다.

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

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

— 제프 셀던
소스
1
그러나 IIRC, 일부 브라우저 (내가 당신의 방향을 찾고 있습니다, IE)는 때때로 이것을 존중하지 않습니다.
— Matthew Schinckel
(명확한 링크가 아닌 올바른 위치에 아이콘 파일을 갖는 것이 더 나은 결과를 얻었습니다).
— Matthew Schinckel
9

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

— 냉동
소스
크롬 버그 는 앞으로 버튼을 나누기 때문에 사실, 난 강력하게 그것을 사용하지 않는 게 좋을 것 - 크롬 해킹이 더 이상 정말 필요하지 않습니다 그래서 크롬 6 (발표 9월 10일)에서 수정되었습니다.
— josh3736
Chrome은 특정 버그와 약간 다른 상황이지만 여전히 동일한 버그를 가지고 있습니다. code.google.com/p/chromium/issues/detail?id=99549
— danorton
4

Greg의 접근 방식을 사용하고 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;
    }
    }
}

그런 다음 IIS6 웹 구성의 httpHandlers 섹션에서 해당 핸들러를 사용하거나 IIS7의 'Handler Mappings'기능을 사용할 수 있습니다.

— 단
소스
1
나는 이것이 왜 downvoted했는지 궁금합니다. 이것은 실제로 다른 사람들이 사용 가능하거나 사용 불가능한 스크립팅에 의존한다는 점을 고려하면 가장 좋은 대답입니다.
— ethermal
1
@ethermal 서버 측에서는 동적 인 것처럼 보이기 때문입니다. OP는 고객 측의 역 동성을 요구했습니다.
— Alexis Wilke
3

IE에서이 작업을 수행 할 수있는 유일한 방법은 웹 서버가 서버 측 스크립팅 언어 (PHP, .NET 등)를 호출하도록 * .ico에 대한 요청을 처리하도록 설정하는 것입니다. 또한 * .ico를 설정하여 단일 스크립트로 리디렉션하고이 스크립트가 올바른 파비콘 파일을 전달하도록하십시오. 다른 즐겨 찾기 아이콘 사이에서 동일한 브라우저에서 앞뒤로 튕길 수 있기를 원한다면 캐시에 흥미로운 문제가 여전히있을 것입니다.

— 그렉
소스
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">

해당 통화에 대한 동적 컨텐츠를 작성하려는 경우 쿠키에 액세스하여 세션 정보를 그런 식으로 검색하고 적절한 컨텐츠를 제시 할 수 있다고 생각합니다.

파일 형식이 손상 될 수 있습니다 (IE는 .ICO 형식 만 지원하며 대부분의 사람들은 PNG 및 GIF 이미지를 지원하지만 브라우저 및 프록시를 통해 캐싱 문제가 발생할 수 있음). 이는 즐겨 찾기 아이콘의 원래 의도, 특히 사이트의 미니 로고로 책갈피를 표시하기위한 것입니다.

— 정산
소스
그것보다 훨씬 더. stackoverflow.com/a/45301651/661584 발전기 사이트의 FAQ / 정보는 당신을 놀라게 할 것입니다-이 주제에는 많은 것이 있습니다.
— MemeDeveloper
3
웹은 9 년 만에 많은 변화를 겪었습니다.
— staticsan
2

네 가능합니다

  • favicon.ico 다음에 querystring 을 사용하십시오 (및 기타 파일 링크-아래 답변 링크 참조).
  • 서버가 올바른 이미지 파일 ( 정적 라우팅 규칙 또는 동적 서버 측 코드 일 수 있음)로 "someUserId"에 응답하는지 확인하십시오 .

예 : 

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

그러면 사용 하는 서버 측 언어 / 프레임 워크 가 userId를 기반으로 파일 을 쉽게 찾고 해당 요청 에 대한 응답으로 파일 을 제공 할 수 있어야합니다 .

그러나 제대로 파비콘을 수행하는 (그 사실은 정말 복잡한 주제 ) 여기에 대한 답을 참조하십시오 https://stackoverflow.com/a/45301651/661584

모든 세부 사항을 직접 연습하는 것보다 훨씬 쉽습니다 .

즐겨.

— MemeDeveloper
소스
예, 링크가 좋습니다. IE에서 이러한 답변이 작동하지 않는 주된 이유는 기본 아이콘을 사용하지 않고 <link>대신 apple-touch-icon또는 다른 변형을 찾기 때문이라고 생각합니다 .
— Alexis Wilke
1

내 프로젝트에서 favico.js 를 사용 합니다.

즐겨 찾기 아이콘을 미리 정의 된 모양 범위와 사용자 정의 모양으로 변경할 수 있습니다.

내부적으로는 아이콘 인코딩을 canvas위한 렌더링 및 base64데이터 URL에 사용됩니다.

라이브러리에는 아이콘 배지와 애니메이션; 또한 웹캠 비디오를 아이콘으로 스트리밍 할 수도 있습니다. :)

— 오스카 네 바레즈
소스
링크와 라이브러리는 매우 유용합니다. 설명 된대로 질문에 대한 올바른 답변이되도록 작동 방식을 설명해주십시오.
— Dima Tisnek
1
@DimaTisnek에게 감사합니다. 나는 내 대답을 뒤엎었다.
— Oscar Nevarez
0

사이트를 개발할 때이 기능을 항상 사용합니다. 따라서 로컬, 개발자 또는 제품이 실행중인 탭을 한눈에 볼 수 있습니다.

이제 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 (도구를 사용하는 경우 Jake Archibald의 SVGOMG로 정리)를 맨 위에있는 const에 넣으십시오. viewBox 속성을 사용하여 정사각형인지 확인하십시오.

— 러스킨
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.