【Django】ブラウザのタブにアイコン「favicon」を設置する方法。エラー対応あり

Djangoで構築したWebサイトでブラウザのタブに設置するアイコン（favicon）の設置方法についてまとめました。

設定しても反映されない事象に対しても記載しているので参考にしてください。

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のファビコンの設定は以上となります。

Python構築入門

サーバーを構築するならVPSがおすすめです。

現役エンジニアがおすすめするVPSレンタルサーバ比較（高速SSD限定）

「Udemy」で無料のPython講座を検索

エンジニアのオンライン学習

ITエンジニアにおすすめの教材、オンラインスクールです。
無料からエンジニアの学習ができる教材などまとめているので参考にしてください。

オンライン学習の比較はこちらから

おすすめオンライン教材
Udemy
自宅で学習ができるオンラインスクール
【テックアカデミー】無料キャリアカウンセリング詳細へ