Djangoで構築したWebサイトでブラウザのタブに設置するアイコン（favicon）の設置方法についてまとめました。
設定しても反映されない事象に対しても記載しているので参考にしてください。
をチェック
エンジニア必見！ 技術力を伸ばすVPS徹底比較
>>>Djangoで構築したWebサイトのファビコン（favicon）を設置する方法
Djangoサイトで「favicon」を表示する場合、faviconの読み込み先のフォルダに画像をアップします。
Windowsだと、WinSCPをお勧めしますが、以下はコマンドでのファイルアップデートコマンドとなります。
Desktop $ scp favicon.png root@example.com:/django/static/icon/ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @ WARNING: UNPROTECTED PRIVATE KEY FILE! @ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ Permissions 0644 for '/Users/.ssh/known_hosts' are too open. It is required that your private key files are NOT accessible by others. This private key will be ignored. Load key "/Users/.ssh/known_hosts": bad permissions root@example.com's password: favicon.png 100% 31KB 457.0KB/s 00:00 Desktop $
ファイルを該当フォルダにアップしたあとはhtmlファイルでファビコンを反映させます。
拡張子を「ico」とする場合
DjangoのWebアプリでは静的ファイルを読み込ませるために「static」フォルダ配下のファイルを指定しないといけません。
そのため、htmlファイルの冒頭で以下のコマンドを実行します。
{% load static %}
また、ファビコンのリンクを各一は「head」内に記述する様にします。
以下では、拡張子の「.ico」をファビコンに反映させる設定となります。
<!DOCTYPE html>
{% load static %}
<head>
------中略------
<!-- favicon -->
<link rel="icon" href="{% static '/icon/favicon.ico' %}">
------中略------
</head>
拡張子を「.png」とする場合
拡張子「.png」を反映させる場合は「type」コマンドで拡張子を指定します。
<!DOCTYPE html>
{% load static %}
<head>
------中略------
<!-- favicon -->
<link rel="icon" type="image/png" href="{% static '/icon/favicon.png' %}">
------中略------
</head>
ファビコンがうまく表示されない場合
ファビコンを設定してもうまく反映されない場合があります。
Googleブラウザから、右クリック > 「検証」をすると拡張子があっていないことがあります。
拡張子「ico」→「png」へ変換し再アップロードする方法もありますが、簡単なのはdjangoを再起動した方が早いです。
Dockerコンテナ環境は「restart」コマンドで正常に表示される
私の環境はDockerコンテナ上でDjangoを構築しているので以下のコマンドで再起動することで反映される様になりました。
$ docker-compose restart Restarting https-portal ... done Restarting django ... done Restarting postgres ... done $
ファビコンが正常に反映されると以下の様に表示されます。
Djangoのファビコンの設定は以上となります。
ITエンジニアの開発・検証・学習としてインターネット上で専用のサーバ（VPS）を利用しましょう！
実務経験はVPSで学べます。
コメント