Express JS Favicon 設定ガイド

Express アプリのタブに空白のアイコンしか表示されない場合、favicon ファイルは存在していても、public directory から配信されていないか、ページの head で link されていない可能性があります。この Express JS favicon ガイドでは、static middleware と標準的な HTML link を使って設定します。

前提条件

正方形のブランドマークを用意します。Mzu favicondl を使用すると、SVG、ICO fallback、任意の Apple touch PNG を作成できます。

次の条件も必要です。

• 起動している Express app。
• 共有 HTML layout、または public/index.html へのアクセス権。
• app を起動する command（npm start など）。

Express JS favicon の設定

1. public directory を作成

   ブラウザに公開する asset は、project root の public directory に配置します。

   my-app/
   ├─ public/
   │  ├─ favicon.svg
   │  ├─ favavicon.ico
   │  ├─ apple-touch-icon.png
   │  └─ index.html
   └─ app.js

   Linux server は大文字と小文字を区別するため、filename は変更せず正確に指定してください。

2. public directory を配信

   application の route や catch-all な 404 handler より前に static middleware を登録します。

   const express = require('express');
   const path = require('path');
   
   const app = express();
   
   app.use(express.static(path.join(__dirname, 'public')));
   
   app.listen(3000, () => {
     console.log('Listening on http://localhost:3000');
   });

   Express は public/favicon.svg を /favicon.svg に mapping し、public/index.html も / で配信できます。static middleware より前に配置した route は、icon の request に先に response する可能性があります。

3. HTML head で icon を link

   共有 layout に明示的な link を追加し、どの route からでも icon を参照できるようにします。

   <head>
     <link rel='icon' href='/favicon.svg' type='image/svg+xml'>
     <link rel='icon' href='/favicon.ico' sizes='16x16 32x32 48x48'>
     <link rel='apple-touch-icon' href='/apple-touch-icon.png'>
   </head>

   HTML Standard は rel='icon' を外部 resource への link と定義しています。そのため、これらの tag によって browser に明示的な icon URL を指定できます。

4. files と rendered HTML を確認

   server を再起動してから、2 つの file を request します。

   curl -I http://localhost:3000/favicon.svg
   curl -I http://localhost:3000/favicon.ico

   どちらの request も HTTP 200 を返すはずです。page source に同じ path が含まれているか確認してください。files は response されているのに tab の表示がまだ異なる場合は、favicon troubleshooting checklist を使ってください。

5. icon の更新を安全に公開

   icon を変更したら、HTML の URL を href='/favicon.svg?v=2' に更新し、deployment ごとに version number を increment してください。filename に hash を付ける方法でも、old URL の再利用を避けられます。cache-busting guide では、その trade-offs を説明しています。

Express でよくある落とし穴

• ディレクトリ指定の誤り：src 内のファイルは、express.static がそのディレクトリを指していない限り公開されません。
• 順序の誤り：express.static より前に catch-all ルートを配置すると、favicon へのリクエストを遮断する場合があります。
• 1ページだけに限定している：リンクは EJS、Pug、または HTML のレイアウトに配置してください。特定の1つのルートだけに含めないでください。
• サブパスへのデプロイ：root-relative の /favicon.svg は、プレフィックス配下にマウントされたアプリでは参照できない可能性があります。public base path を基準にURLを生成してください。

まとめ

アセットのパス、static middleware、共有する HTML リンクを揃えてください。これで専用のアイコンコントローラーを設けることなく、すべての Express ルートから同じ favicon を利用できます。