【Flask入門】Flaskでのfavicon.ico 404エラー解決方法

Flaskアプリケーションを実行していると、get /favicon.ico http/1.1 404というエラーメッセージが表示されることがあります。このエラーは、ブラウザがWebアプリケーションにアイコン（favicon.ico）を要求したが、それが見つからない場合に発生します。favicon.icoは、ブラウザのタブやお気に入りに表示される小さなアイコンのことです。

この記事では、このエラーを解決するための方法を解説しています。

INDEX

favicon.ico ファイルを用意する
favicon.ico ファイルを static フォルダに配置
1. プロジェクトのディレクトリ構造
favicon.ico を HTML にリンクする
1. index.html の編集
2. Flaskサーバーの再起動
最後に確認
まとめ

favicon.ico ファイルを用意する

まず最初に、Webアプリケーション用のfavicon.icoファイルを用意する必要があります。このファイルは、インターネットからダウンロードするか、自分でデザインすることができます。favicon.icoは標準的なアイコン形式であり、ファイル名を変更しないようにしてください。

インターネットからダウンロードする方法: 「favicon.ico」や「favicon generator」で検索すれば、簡単にアイコンをダウンロードできます。
自分で作成する方法: 画像編集ソフトを使って16×16ピクセルまたは32×32ピクセルのアイコンを作成し、favicon.icoとして保存します。

favicon.ico ファイルを static フォルダに配置

Flaskでは、静的なファイル（画像やCSS、JavaScriptなど）は通常、staticというフォルダに格納されます。favicon.icoもその例外ではなく、staticフォルダに配置します。

プロジェクトのディレクトリ構造

favicon.icoをstaticフォルダ内に配置することで、Flaskは自動的にそのアイコンを提供します。以下のようにディレクトリ構造を前提とします。

/your-flask-app
    /static
        favicon.ico
    /templates
        index.html
    app.py

このように、favicon.icoをstaticフォルダ内に保存してください。

favicon.ico を HTML にリンクする

次に、FlaskのHTMLテンプレートでfavicon.icoを正しく参照するために、<head>タグ内にリンクを追加します。これにより、ブラウザがアイコンを正しく認識し、タブに表示されるようになります。

index.html の編集

index.html ファイル（またはその他のテンプレートファイル）に、以下のリンクタグを追加します。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>タスク管理アプリ</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
    <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
</head>

この<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">タグは、Flaskのurl_for関数を使って、staticフォルダ内にあるfavicon.icoファイルのURLを自動的に生成します。

Flaskサーバーの再起動

変更を反映させるために、Flaskサーバーを再起動します。ターミナルで以下のコマンドを実行します。

python3 app.py

これで、Flaskアプリケーションが再起動し、favicon.icoの設定が反映されます。

最後に確認

再起動後、ブラウザでアプリケーションにアクセスして、タブにfavicon.icoが正しく表示されることを確認します。これで、favicon.icoに関する404エラーは解消されるはずです。

結果

404エラーが解消されたことの確認

ブラウザのタブにアイコンが表示されるとともに、ターミナルにget /favicon.ico http/1.1 404エラーが表示されなくなるはずです。アイコンが正しく表示されれば、エラーの解決が確認できたことになります。

"GET /static/favicon.ico HTTP/1.1" 200 -

404エラーは無くなったけど、画面に反映されない場合

このときは、ブラウザが以前の設定をキャッシュしているため、変更が反映されないことがあります。

タブにアイコンが表示されない場合、まずはブラウザのキャッシュをクリアしてみて下さい。

まとめ

この記事では、Flaskアプリケーションで発生するfavicon.icoに関する404エラーの解決方法を紹介しました。具体的には、favicon.icoファイルをstaticフォルダに配置し、HTMLテンプレートで適切にリンクを設定することで、エラーを解消できます。この手順を試すことで、アプリケーションのタブにアイコンが表示されるようになります。

これで、Flaskアプリケーションにアイコンを設定して、404エラーを解消できるようになります。