web-dev-qa-db-ja.com

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

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

app.use(express.favicon());

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

javascriptnode.jsexpressfavicon
126
Ilya Karnaukhov

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')));

faviconがstaticよりも優れている理由

パッケージの説明 ：

  1. このモジュールはメモリにアイコンをキャッシュして、ディスクアクセスをスキップすることでパフォーマンスを改善します。
  2. このモジュールは、ファイルシステムプロパティではなく、アイコンの内容に基づいてETagを提供します。
  3. このモジュールは、最も互換性のあるContent-Typeで機能します。
219
Benjamin Gruenbaum

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

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

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

 //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アイコンを作成する一般的な情報

アイコンは、PhotoshopまたはInkscapeを使用して作成されます。Inkscapeを使用して、Photoshopで鮮やかさと色補正を行うことができます（画像->調整メニュー）。

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

その後、Photoshopで画像を強化することができます。鮮やかさ、ベベル効果、丸いマスクなど。

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

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

16
Shimon Doodkin

カスタムミドルウェアは不要ですか？！エクスプレスで：

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

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

<link rel="icon" href="/public/favicon.ico">
12
DaafVader
app.use(express.favicon(__dirname + '/public/images/favicon.ico'));

__dirname +なしでローカルで動作していましたが、デプロイされたサーバーで動作させることができませんでした。

8
ThomasReggi

Express> 4.0を使用している場合、 serve-favicon

5
Anastasios Andronidis

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

3
Mohsin Khan

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

npm install express-favicon --save

次のように使用します。

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

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

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

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

そして、このエラーメッセージが返されました：

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

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

0
amunnelly

以下にリストされたコードは機能します：

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

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

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

0
blakeface

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
0
Nikolas H