웹사이트 파비콘을 동적으로 변경하기

StackOverflow https://stackoverflow.com/questions/260857

  •  06-07-2019
  •  | 
  •  

문제

현재 로그인한 사용자에 따라 브랜드가 지정된 웹 애플리케이션이 있습니다.페이지의 파비콘을 개인 상표의 로고로 변경하고 싶지만 이 작업을 수행하는 방법에 대한 코드나 예를 찾을 수 없습니다.이전에 이 작업을 성공적으로 수행한 사람이 있나요?

나는 폴더에 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" />

예를 들어 JQuery를 사용한다고 가정하면 이 링크에서 HREF 요소를 변경하여 Javascript를 사용하여 파비콘을 변경할 수 있습니다.

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

또한 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은 헤드 태그에서 다음과 같은 것과 같은 것으로 선언됩니다.

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

보기 데이터에서 원하는 아이콘 이름을 전달하여 헤드 태그에 던질 수 있어야합니다.

다음은 오페라, 파이어 폭스 및 크롬에 동적 인 Favicon 지원을 추가하는 데 사용하는 몇 가지 코드입니다. 그래도 IE 나 사파리가 일할 수 없었습니다. 기본적으로 Chrome은 동적 인 Favicon을 허용하지만 페이지 위치 (또는 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 내가 이것을 기반으로 한 코드의 경우.)

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의 '핸들러 매핑'기능을 사용할 수 있습니다.

IE 의이 작업을 수행하는 유일한 방법은 웹 서버가 *.ICO에 대한 요청을 처리하여 서버 측 스크립팅 언어 (PHP, .NET 등)를 호출하는 것입니다. 또한 단일 스크립트로 리디렉션하기 위해 *.ico를 설정 하고이 스크립트가 올바른 Favicon 파일을 제공하도록합니다. 다른 파비콘 사이의 동일한 브라우저에서 앞뒤로 튀어 오르고 싶다면 캐시와 관련하여 여전히 흥미로운 문제가있을 것이라고 확신합니다.

jQuery를 사용하는 사람들을위한 단일 라인 솔루션이 있습니다.

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

에 따르면 위키 백과, 당신은로드 할 Favicon 파일을 지정할 수 있습니다. link 태그 head 매개 변수가있는 섹션 rel="icon".

예를 들어:

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

해당 통화에 대한 동적 콘텐츠를 작성하고 싶다면 쿠키에 액세스 할 수 있으므로 세션 정보를 검색하고 적절한 콘텐츠를 제시 할 수 있습니다.

파일 형식의 파울 (즉, 다른 사람들은 PNG 및 GIF 이미지를 지원하는 반면)과 프록시를 통해 문제를 캐싱 할 수 있습니다. 이는 Pavicon의 원래 Itention, 특히 사이트의 미니 로고로 북마크를 표시하기 때문입니다.

예 완전히 가능합니다

  • a 쿼리 스트링 favicon.ico (및 기타 파일 링크 - 아래 답변 링크 참조).
  • 서버가 올바른 이미지 파일 (즉 공전 라우팅 규칙, 또는동적 서버 사이드 코드).

예를 들어 

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

그 다음에 서버 측 언어 / 프레임 워크 당신은 쉽게 찾을 수 있어야합니다 userID를 기반으로 파일 그리고 그것을 제공하십시오 그 요청에 대한 응답.

그러나 파비콘을 제대로 수행합니다 (실제로 a 진짜 복잡한 주제) 여기에서 답을 참조하십시오 https://stackoverflow.com/a/45301651/661584

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

즐기다.

또는 이모티콘을 원한다면 :)

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/

나는 사용한다 favico.js 내 프로젝트에서.

Favicon을 사전 정의 된 모양과 사용자 정의 모양으로 변경할 수 있습니다.

내부적으로 사용합니다 canvas 렌더링 및 base64 아이콘 인코딩의 데이터 URL.

도서관에는 또한 아이콘 배지 및 애니메이션; 저작권적으로 웹캠 비디오를 아이콘으로 스트리밍 할 수도 있습니다 :)

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top