Djangoアプリにfaviconを設定する

Djangoを使ったWebアプリにfaviconを設定する。

追記
環境
参考
faviconについて
Djangoの静的ファイルの扱いについて
1. 静的ファイルの配置
2. 静的ファイルのロード
faviconのジェネレータ
終わり

追記

2021/01/19: faviconジェネレータサイトについて更新

環境

Django==2.2.5

参考

faviconについて

ブックマークとかサイトのアイコンになるもの。ブラウザは特に指定がなければ、/favicon.icoのリソースを要求する。

ブラウザにfaviconのリソースのありかを指定するには、htmlファイルのhead内の子要素に、

<link rel="icon" type="image/png" href="icon_file_path">

などを記述すれば良い。

Djangoの静的ファイルの扱いについて

appのstaticディレクトリにiconディレクトリを作成し、読み出すようにする。

静的ファイルの配置

Djangoのstaticファイルの作成ルールとしては、staticディレクトリ内にアプリと同名のディレクトリを作成して、その中に各種用途ごとのディレクトリを作成するのが推奨されているはず。

なので、次のようなディレクトリ構造になる。（だいぶ簡略化）

.
├── ...
└── django_proj
    ├── manage.py
    └── app
        ├── ...
        ├── static
        │   └── app
        │       ├── css
        │       │   └── ...
        │       ├── icon
        │       │   ├── ...
        │       │   └── favicon.png  # ここに配置した
        │       └── js
        │           └── ...
        └── ...

この構造のもとで、faviconとなる静的ファイルを配置しておけば良い。

静的ファイルのロード

配置が済んだらロードできるようにする。上述したhtmlファイルのhead内で、配置した静的ファイルをロードする。

<head>
  ...
  <link rel="icon" type="image/png" href="{% static 'app/icon/favicon.png' %}">
</head>
...

{% static 'icon_path' %}が重要。こうすることでDjangoが、適切なパスを生成してくれる。<app_name>/icon/<file_name>をstaticの引数に指定すれば、htmlに埋め込むことができる。

faviconのジェネレータ

2021/01追記: Favicon Generator for perfect icons on all browsersの方がオススメ。関連記事: jekyllなサイトでfaviconをルートに置かないようにして設置 | ikapblog

各種のブラウザ対応など考えると、ジェネレータを使って、1つのリソースから各種に対応したfaviconを作成したほうが楽で確実。

参考にも挙げたFavicon & App Icon Generatorを使うと、faviconの生成とhtmlに埋め込むべき要素を自動生成してくれる。しかし、hrefをDjango向けに書き換える必要はあるので、そこだけは少し面倒。置換を使えば済むのであまり気にならないが。

以下のものを生成してくれる。詳しく調べていないが十分だろう。

<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">