Expressでカスタムファビコンを設定する方法

私は最近Node.jsで作業を開始し、app.jsファイルに次の行があります。

app.use(express.favicon());

では、自分のカスタムfavicon.icoを設定するにはどうすればよいですか？

Express 4

faviconミドルウェアをインストールしてから、次の手順を実行します。

var favicon = require('serve-favicon');

app.use(favicon(__dirname + '/public/images/favicon.ico'));

または、pathモジュールを使用して：

app.use(favicon(path.join(__dirname,'public','images','favicon.ico')));

（このソリューションはExpress 3アプリでも機能することに注意してください）

Express 3

APIによると、.favicon場所パラメーターを受け入れます。

app.use(express.favicon("public/images/favicon.ico")); 

ほとんどの場合、（vsyncが示唆するように）これが必要になる場合があります。

app.use(express.favicon(__dirname + '/public/images/favicon.ico'));

さらに良いことに、pathモジュールを使用します（Druskaが提案したとおり）：

app.use(express.favicon(path.join(__dirname, 'public','images','favicon.ico'))); 

ファビコンが静的よりも優れている理由

パッケージの説明によると：

1. このモジュールは、アイコンをメモリにキャッシュして、ディスクアクセスをスキップしてパフォーマンスを向上させます。
2. このモジュールは、ETagファイルシステムプロパティではなく、アイコンのコンテンツに基づいて提供します。
3. このモジュールは、最も互換性のあるもので提供されContent-Typeます。

追加のミドルウェアは必要ありません。ただ使用する：

app.use('/favicon.ico', express.static('images/favicon.ico'));

エラーを防ぐためのスマイリーファビコン：

 //const fs = require('fs'); 
 //const favicon = fs.readFileSync(__dirname+'/public/favicon.ico'); // read file
 const favicon = new Buffer.from('AAABAAEAEBAQAAAAAAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAA/4QAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEREQAAAAAAEAAAEAAAAAEAAAABAAAAEAAAAAAQAAAQAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAEAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD//wAA//8AAP//AAD8HwAA++8AAPf3AADv+wAA7/sAAP//AAD//wAA+98AAP//AAD//wAA//8AAP//AAD//wAA', 'base64'); 
 app.get("/favicon.ico", function(req, res) {
  res.statusCode = 200;
  res.setHeader('Content-Length', favicon.length);
  res.setHeader('Content-Type', 'image/x-icon');
  res.setHeader("Cache-Control", "public, max-age=2592000");                // expiers after a month
  res.setHeader("Expires", new Date(Date.now() + 2592000000).toUTCString());
  res.end(favicon);
 });

上記のコードでアイコンを変更するには

ここにアイコンを作成してください：http : //www.favicon.cc/またはここ：http : //favicon-generator.org

多分ここにそれをbase64に変換します：http：//base64converter.com/

次に、アイコンのベース64の値を置き換えます

パーソナライズされたfavアイコンの作成方法に関する一般情報

アイコンは、フォトショップまたはインクスケープを使用して作成されます。おそらく、インクスケープ、次にフォトショップで、鮮やかさと色補正を行います（画像->調整メニュー）

クイックアイコンの場合は、http： //www.clker.com/にアクセスして、いくつかのベクタークリップアートを選択し、svgとしてダウンロードします。次に、それをinkscape（https://inkscape.org/）に持ってきて、色を変更するか、パーツを削除します。別のベクタークリップアートイメージから何かを追加し、エクスポートするパーツを選択して、ファイル>エクスポートをクリックし、16x16のようなサイズを選択します。ファビコンまたは32x32。さらに編集するには、128x128または256x256。icoパッケージには、複数のアイコンサイズを含めることができます。それは、16x16ピクセルのファビコンと共に、ウェブサイトへのリンクのための高品質のアイコンを持つことができます。

次に、フォトショップで画像を強化します。鮮やかさ、ベベル効果、丸いマスクなど。

次に、この画像をファビコンを生成するWebサイトの1つにアップロードします。https://sourceforge.net/projects/variicons/のようなアイコンを編集するためのウィンドウ用のプログラムもあります。

ファビコンをウェブサイトに追加します。ドメインのルートフォルダにファイルとしてfavicon.icoを置くだけです。たとえば、静的ファイルを含むパブリックフォルダーのnode.jsにあります。単純なファイルの上のコードのような特別なものである必要はありません。

カスタムミドルウェアは必要ありませんか？！急いで：

 //you probably have something like this already    
app.use("/public", express.static('public')); 

次に、ファビコンを公開し、htmlの頭に次の行を追加します。

<link rel="icon" href="/public/favicon.ico">

app.use(express.favicon(__dirname + '/public/images/favicon.ico')); 

私はそれなしでローカルで動作させて__dirname +いましたが、展開したサーバーで動作させることができませんでした。

Express> 4.0を使用している場合は、serve-faviconを使用できます

静的パスを設定している場合<link rel="icon" href="https://stackoverflow.com/images/favicon.ico" type="image/x-icon">は、ビューでを使用してください。他には何も必要ありません。パブリックフォルダー内に画像フォルダーがあることを確認してください。

express-faviconミドルウェアをインストールします。

npm install express-favicon --save

次のように使用します。

const favicon = require('express-favicon');
app.use(favicon(__dirname + 'favicon.ico'));

ファビコンを提供するには、ミドルウェアをインストールする必要があります。

私は今これを試しました：

app.use(express.favicon(path.join(__dirname, 'public','images','favicon.ico'))); 

そしてこのエラーメッセージを取り戻しました：

エラー：ほとんどのミドルウェア（ファビコンなど）はExpressにバンドルされなくなったため、個別にインストールする必要があります。参照してください https://github.com/senchalabs/connect#middlewareを。

私たちはそれを決定的なものとして捉えることができると思います。

以下のコードは機能します。

var favicon = require('serve-favicon');

app.use(favicon(__dirname + '/public/images/favicon.ico'));

ブラウザを更新するか、キャッシュをクリアしてください。

ステップ0：以下のコードをapp.jsまたはindex.jsに追加します

app.use("/favicon.ico", express.static('public/favicon.ico'));

ステップ1：ここからhttps://icons8.com/からアイコンをダウンロードするか、独自の
ステップを作成します2：https : //www.favicongenerator.com/に移動します
ステップ3 ：ダウンロードしたicon.pngファイルをアップロード> 16pxを設定> faviconを作成>ダウンロード
ステップ4：ダウンロードフォルダーに移動し、[。icoファイル]を見つけて、名前をfavicon.icoに変更します
ステップ5：favicon.icoをパブリックディレクトリにコピーします
ステップ6 を作成しました。以下のコードを.pugファイルのheadタグの下、titleタグの下に追加します

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

手順7：保存>サーバーを再起動>ブラウザーを閉じる>ブラウザーを再度開く>ファビコンが表示される

注：ファビコン以外の名前を使用できますが
            、コードとパブリックフォルダーで名前を変更してください。

app.jsの場合：

app.use(express.static(path.join(__dirname, 'public')));

アイコンが「/public/images/favicon.ico」にあると想定して、htmlのヘッドに次のリンクを追加します。

<link rel='icon' href='/images/favicon.ico' class='js-favicon'>

これは、次のコマンドで自動生成されたプロジェクトで正常に機能しました。

express my-project

外部ファイルを含まず、使用しないソリューションが必要な場合express.static（たとえば、超軽量の1ファイルのWebサーバーおよびサイト）serve-favicon、favicon.icoファイルをBase64として使用およびエンコードできます。このような：

const favicon = require('serve-favicon');
const imgBuffer = new Buffer.from('IMAGE_AS_BASE64_STRING_GOES_HERE', 'base64');
// assuming app is already defined
app.use(favicon(imgBuffer));

IMAGE_AS_BASE64_STRING_GOES_HEREファビコンファイルをBase64としてエンコードした結果に置き換えます。オンラインで検索できるサイトはたくさんあります。

サーバーやブラウザを再起動して動作することを確認しlocalhost、ハードリフレッシュ/ブラウザキャッシュをクリアしてWebで動作することを確認する必要があります。