web-dev-qa-db-ja.com

Express.jsでファビコンを変更できません

これは本当に基本的な質問ですが、node.js/Expressアプリのファビコンを次のように変更しようとしています。

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

そして、私はまだデフォルトのファビコンを取得しています。これは私のapp.configure関数にあり、はい、isfavicon.icoに/public/images/favicon.icoがあることを確認しました。コンソールのfavicon.icoにも何もありません。コードは無視されます。関数の他のすべて（ポートの設定、ビューディレクトリの設定、テンプレートエンジンの設定など）が正常に機能しているように見えるのに、なぜこのコード行が実行されないのでしょうか？

私が試したもの

  • ブラウザのキャッシュを空にする
  • ターミナルを再起動し、node app.jsを再度実行します
  • 説明したように{ maxAge: 2592000000 }を追加します here

前もって感謝します。

更新：動作するようになりました。詳細については、以下の私の回答をご覧ください。

node.jsexpressfavicon
52
gtmtg

Safariのサイトに初めてアクセスしてみました（通常はChromeを使用しています）が、正しいファビコンが表示されていることに気付きました。 Chromeでもう一度（2回）キャッシュをクリアしませんでしたが、さらに検索した結果、 明らかにファビコンはキャッシュに保存されていません です。 here で説明されている方法を使用して「faviconを更新しました」

リンクが機能しなくなった場合の方法は、上記のリンクから変更されたメソッドです。

  1. Chrome /問題のあるブラウザーを開きます
  2. Favicon.icoファイルに直接移動します（例： http：// localhost：3000/favicon.ico
  3. F5キーまたは適切なブラウザの[更新（再読み込み）]ボタンを押して、favicon.ico URLを更新します。
  4. ブラウザを閉じてウェブサイトを開きます-ファビコンが更新されました！
74
gtmtg

最終的に私のために働いたもの：

それを見て

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

アプリ構成機能の先頭にあります。私は最後にそれを持っていました。 Expressのドキュメントでは、「app.use()を使用してミドルウェアを「定義」する順序は非常に重要であり、順番に呼び出されるため、ミドルウェアの優先順位が定義されます。」

MaxAgeを設定する必要はありませんでした。

テストするには：

  • _node app.js_を使用してサーバーを再起動します
  • ブラウザのキャッシュをクリアする
  • 「localhost：3000/your_path_to_the favicon/favicon.ico」を使用してリロードし、ファビコンに直接アクセスしてファビコンを更新します
35
user976647

上記の答えはもはや有効ではありません。

使用する場合

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

このエラーが表示されます：

Error: Most middleware (like favicon) is no longer bundled with Express and must be installed separately

あなたがする必要があるのはget serve-favicon です。

走る

npm install serve-favicon --save

次に、これをアプリに追加します

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

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

私のために働いたものは次のとおりです。エクスプレスを設定して、通常どおり静的リソースを提供します。たとえば、

app.use(express.static('public'));

ファビコンをパブリックフォルダーに入れます。次に、アイコンのURLにクエリ文字列を追加します。たとえば、

<link rel="icon" type="image/x-icon" href="favicon.ico?v="+ Math.trunc(Math.random()*999)>

この場合、Chromeは動作不良のブラウザです。IE、Firefox、Safari（すべてWindows））は、上記のトリックなしで正常に機能しました。

2
joedotnot

私が思いつく最も簡単な方法は（もちろんローカル開発者にのみ有効）、別のポートでサーバーをホストすることでした

PORT=3001 npm run start

2
Bhavin

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

 var favicon = new Buffer('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に持っていき、色を変更するか、パーツを削除し、別のベクタークリップアート画像から何かを追加し、エクスポートするパーツを選択してエクスポートし、ファイル>エクスポートをクリックします。 icoパッケージは、内部にいくつかのアイコンサイズを持つことができます。 16x16ピクセルのfavアイコンとともに、Webサイトへのリンク用の高品質アイコンを含めることができます。

それから多分Photoshopで画像を強化します。 Vibrance bivel round maskなど何でも。

次に、この画像をファビコンを生成するWebサイトの1つにアップロードします。アイコンを編集するためのウィンドウ用のプログラムもあります（「windows icon editor opensource」のような検索、単一のアイコン内に異なるサイズの2つのイメージを作成する方法を考えてください）。

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

1
Shimon Doodkin

ブラウザのキャッシュをクリアしようとしましたか？古いファビコンがまだキャッシュに残っている可能性があります。

0
zemirco

明示せずにこれを行う方法：

if (req.method == "GET") {
     if (/favicon\.ico/.test(req.url)) {
        fs.readFile("home/usr/path/favicon.ico", function(err, data) {
            if (err) {
                console.log(err);
            } else {
                res.setHeader("Content-Type","image/x-icon");
                res.end(data);
            }
     });
}
0
med116