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


関連記事


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

ABOUTこの記事をかいた人

blank

インターネット関連のSEをやっています。 ネットワーク、サーバー、ストレージ、仮想基盤まで幅広く手を出しており、MVNOの構築経験もあります。 現在は、Pythonを使ったプログラミングの開発をしネットワークの自動化ツールを作成しています! Pythonの入門書も作成しているので、ぜひ参考にしてください!