Flask favicon 設定：開発者向けステップガイド

Flask のページが正しくレンダリングされても、プロジェクトに favicon link がなければ、ブラウザのタブは空欄のままです。より Peaks な flask favicon の設定方法は、icon を Flask の static directory に保存し、共通的に使用する Jinja template から link することです。

始める前に必要なものは何ですか？

• templates/base.html を備えた、動作中の Flask project。
• favicon.ico という名前の icon file。複数サイズを収録した ICO は、ブラウザでのフォールバックとして実用的です。
• サイト共通の HTML head をレンダリングするファイルへのアクセス権。

flask favicon を5ステップで追加する方法

1. 1. icon を static directory に配置する

   次の folder が存在しない場合は作成し、file をこの場所に配置します。

   myapp/
   ├── app.py
   ├── static/
   │   └── favicon.ico
   └── templates/
       └── base.html

   PNG のファイル名を favicon.ico に変更しないでください。本物の ICO を使用してください。PNG や SVG を使う link format については、HTML favicon guide を参照してください。

2. 2. base template に link を追加する

   HTML Standard は、外部の icon resource を参照する rel='icon' link を定義しています。templates/base.html の既存の <head> 内に、次の block を追加してください。

   {% block head %}
     <link rel='icon' href='{{ url_for('static', filename='favicon.ico') }}'>
   {% endblock %}

   app が URL prefix や独自の static path を使用する場合、url_for を使えば hard-coded な path を避けられます。

3. 3. 各ページに継承させる

   各ページから base template を継承させます。base template の head block に別の名前 붙いている場合は、以下のコードをその名前に置き換えてください。

   {% extends 'base.html' %}
   {% block head %}
     {{ super() }}
   {% endblock %}

   super() を呼び出すことで favicon を維持しながら、各ページで head content を追加できます。

4. 4. 実行して response を確認する

   development server を起動し、icon の URL に直接アクセスします。

   flask --app app run --debug
   # Open http://127.0.0.1:5000/static/favicon.ico

   直接リクエストした response は、HTML や 404 ではなく icon を返すはずです。レンダリングされた <head> を inspection し、url_for が生成した rel='icon' link が含まれていることを確認してください。

5. 5. 安定した public URL で deploy する

   本番環境では、static/favicon.ico を application route ではなく static asset として配信してください。file name は変更しないようにします。古い icon を差し替える場合は favicon-v2.ico を使い、template も更新してください。これにより、キャッシュに残った古いコピーの使用を避けられます。

よくあるトラブル

• タブが空白になる: ファイルは存在しますが、テンプレートから参照されていない、または link が document head の外にあります。
• Network panel に 404 が表示される: ファイルが誤ったディレクトリにあるか、ハードコードした static URL がデプロイ環境と一致していません。
• 古いアイコンが表示され続ける: ブラウザがキャッシュされたコピーを使用しています。asset 名を変更するか、favicon の cache-busting ガイドに従ってください。
• 画像が壊れて表示される: ファイルの指定が誤っているか、server が誤った content type を返しています。

Flask の favicon 設定が完了するのはどのような場合ですか？

favicon の直接 URL からファイルが返り、すべてのページが rel='icon' 宣言を継承していれば、設定は完了です。元の artwork が必要なら、Flask に追加する前に Mzu favicondl で favicon ファイルを準備できます。