ウェブサイトのファビコンを動的に変更する

347

現在ログインしているユーザーに応じてブランド化されたWebアプリケーションがあります。ページのファビコンをプライベートラベルのロゴに変更したいのですが、コードや方法の例が見つかりませんこれをする。誰かが以前にこれを成功させたことがありますか？

私は、フォルダ内に十数個のアイコンがあり、使用するfavicon.icoファイルへの参照がHTMLページと共に動的に生成されるところを描いています。考え？

javascript  html  dom  favicon 
— SqlRyan
ソース
40
ファビコンにはアーケードゲームがあります。
— Corey Trager
Chromeの動的ファビコンの実装はバグが多く、CPUを使いすぎていることに注意してください。code.google.com/p/chromium/issues/detail?id=121333を
— brillout
6
アーケードゲームのリンクが変わりました。これは正解です。
— 2016年
キャンバスでテンプレート画像の上に描画してファビコンを動的に更新する方法については、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を取得するにはどうすればよいでしょうか。私はjavascriptからサーバールックアップを行う必要があると思いますが、あまり複雑になりたくありません。先端をありがとう。
— SqlRyan 2008年
34
これはいずれにしてもIEでは機能しないためshortcut、rel属性から削除できます。shortcutIE独自のリンク関係は無効です！
— Mathias Bynens、
8
簡単に既存のファビコンリンクを探して更新したり、置き換えたりできます。
— keparo 2011年
5
Googleは、次のURLを使用してサイトのファビコンを提供し、stackoverflow.comを目的の
— domain=
5
これをChromeのJavaScriptコンソールに入力する必要がありますか？さまざまなサイトのファビコンをそのように変更することはできません。
— powerj1984 2013年
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 2011
Chromeのバグは修正された可能性がありますが、14.0.835.187で再び壊れています。
— danorton、2011年
デモはクローム21 / WinXPのを私のために働いていません。
— Hugo
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");

Canvas要素を作成し、Favicon Defenderと同じように、HREFをキャンバスのToDataURL（）として設定することもできます。

— fserb
ソース
1
私は、JSが実行されるときまでに、ブラウザーがリンクをすでに見てロードしようとしたと思いますfavicon.png。これは、サーバー側で行う必要がある場合があります。
— cHao
あなたはjQueryのを使用しない場合は、変更することができるhrefの属性#favicon使用してdocument.getElementById('favicon').setAttribute('href','favicon2.png') たぶん、あなたはあなたのポスト@fserbに追加することができますか？
— ヨハンチョピン
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 2015
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">

必要なアイコンの名前をビューデータで渡すだけで、ヘッドタグにそれを投げることができるはずです。

— ジェフシェルドン
ソース
1
ただし、IIRC、一部のブラウザー（私はあなたの方向でIEを探しています）は、これを実際には尊重しません。
— Matthew Schinckel、2008年
（私は、明示的なリンクではなく、適切な場所にアイコンファイルを配置した方が良い結果が得られたことがわかりました）
— Matthew Schinckel、2008年
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 2011
指摘された特定のバグとは少し異なる状況ではありますが、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のWeb構成のhttpHandlersセクションでそのハンドラーを使用するか、IIS7の「ハンドラーマッピング」機能を使用できます。

— ダン
ソース
1
なぜこれが反対票になったのか、私は実際に興味がありますか？他の人がスクリプトを利用している場合と利用できない場合があるので、これは実際には最良の回答です。
— ethermal
1
@ethermalこれはサーバー側で動的なように見えるためです。OPはクライアント側のダイナミズムを求めていました。
— Alexis Wilke
3

IEでこれを機能させる唯一の方法は、*。icoがサーバー側スクリプト言語（PHP、.NETなど）を呼び出す要求を処理するようにWebサーバーを設定することです。また、単一のスクリプトにリダイレクトするように* .icoを設定し、このスクリプトが正しいファビコンファイルを配信するようにします。異なるファビコン間で同じブラウザ内を行き来できるようにしたい場合は、キャッシュにいくつかの興味深い問題があると確信しています。

— グレッグ
ソース
3

jQueryを使用する人のための単一行のソリューションがあります。

$("link[rel*='icon']").prop("href",'https://www.stackoverflow.com/favicon.ico');
— ペペレガル
ソース
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画像をサポートしています）や、ブラウザーとプロキシーの両方でのキャッシュの問題に陥る可能性があります。これは、特にサイトのミニロゴでブックマークをマークするためのファビコンの本来の意図のためです。

— Staticsan
ソース
それよりももっとたくさん。stackoverflow.com/a/45301651/661584ジェネレーターサイトのよくある質問/情報に驚かされます-このテーマには多くのことが含まれています。
— MemeDeveloper 2017
3
Webは9年間で大きく変わります。
— staticsan
2

はい完全に可能

  • favicon.icoの後にクエリ文字列を使用します（および他のファイルリンク-下記の回答リンクを参照）
  • 単にサーバーが「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に感謝します。私は私の答えを更新しました。
— オスカーネバレス
0

私はサイトを開発するときにこの機能を常に使用しています...ローカル、開発、または製品で実行されているタブが一目でわかります。

ChromeがSVGファビコンをサポートするようになったので、Chromeがずっと簡単になります。

Tampermonkeyスクリプト

https://elliz.github.io/svg-favicon/で試したデモサイトを指すtampermonkeyスクリプトについては、https： //gist.github.com/elliz/bb7661d8ed1535c93d03afcd0609360fをご覧ください。

基本コード

別の答えからこれを採用しました...改善される可能性がありますが、私のニーズには十分です。

(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.