Djangoを使ったWebアプリにfaviconを設定する。
追記
- 2021/01/19: faviconジェネレータサイトについて更新
環境
- Django==2.2.5
参考
- How can I get a favicon to show up in my django app? - Stack Overflow
- Favicon & App Icon Generator
- 2021/01追記: Favicon Generator for perfect icons on all browsers
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">終わり
アイコンもサクッと作れるようになりたい。幾何学的模様を上手に作りたい。など自分のスキルの無さを痛感する次第でした。（今回の記事とはほぼ無関係）
アイコンのジェネレータも別のものでも全く問題ない。
Djangoも3.0がリリースされているので、そちらの対応もする。
