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

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

  •  06-07-2019
  •  | 
  •  

質問

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

フォルダー内に 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');
};

Fork away またはデモを見る。

次の HTML スニペットがある場合:

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

たとえば、このリンクの HREF 要素を変更することで、JavaScript を使用してファビコンを変更できます (JQuery を使用していると仮定します)。

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

また、Canvas 要素を作成し、HREF をキャンバスの ToDataURL() として設定することもできます。 ファビコンディフェンダー そうです。

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

より現代的なアプローチ：

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

ファビコンは、headタグで次のように宣言されます：

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

ビューデータで必要なアイコンの名前を渡すだけで、headタグにスローできるはずです。

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（＆quot; ICON URL＆quot;）に移動します。

（ http://softwareas.com/dynamic-favicons に基づいています。 on。）

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の「ハンドラーマッピング」機能を使用できます。

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

jQueryを使用するユーザー向けの単一行ソリューションがあります。

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

WikiPedia によれば、を使用して読み込むファビコンファイルを指定できます。 rel =＆quot; icon＆quot; のパラメーターを持つ head セクションのlink タグ。

例：

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

その呼び出しのために動的コンテンツを作成したい場合、Cookieにアクセスできるため、セッション情報をそのまま取得して適切なコンテンツを提示できます。

ファイル形式（IEは.ICO形式のみをサポートし、他のほとんどの人はPNGおよびGIF画像をサポートしていると報告されています）と、おそらくキャッシュとプロキシの両方でキャッシュの問題が発生する可能性があります。これは、ファビコンの本来の意図、特にサイトのミニロゴでブックマークをマークすることによるものでしょう。

はい、まったく可能です

  • favicon.ico（およびその他のファイルリンク-の後にクエリ文字列を使用します- 以下の回答リンクをご覧ください）
  • サーバーが＆quot; someUserId＆quot;に応答することを確認してください。と 正しい画像ファイル（静的ルーティングルール、または 動的サーバー側コード）。

e.g。 

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

次に、どのサーバーサイド言語/フレームワークを使用しても、ユーザーIDに基づいてファイルを簡単に見つけて、そのリクエストへの応答で提供する必要があります。 。

ただし、ファビコンを適切に実行するには（実際には 本当に 複雑なテーマ）こちらの回答をご覧ください< a href = "https://stackoverflow.com/a/45301651/661584"> 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 を使用しています。

ファビコンを定義済みのシェイプとカスタムシェイプの範囲に変更できます。

内部では、レンダリングに canvas を使用し、アイコンのエンコードに base64 データURLを使用します。

ライブラリには素晴らしい機能もあります。アイコンバッジとアニメーション。伝えられるところによれば、ウェブカメラの動画をアイコンにストリーミングすることもできます：）

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top