Zenn
📷

Djangoでアイコンを表示する

2021/12/05に公開
django
Python
tech

Djangoでブラウザのタブにアイコンを表示するときに結構詰まったのでメモ書き

staticディレクトリの作成

アプリケーションのプロジェクトディレクトリ内にstaticディレクトリとtemplatesディレクトリを作成します。

static/iconディレクトリにアイコン画像を置いておきます。

アイコンは何でもいいですが、今回はこちらのサイトから見つけたアイコンを使います。

アイコンを保存して以下のディレクトリ構造になっていれば大丈夫です。

.
├── app
│   ├── asgi.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── manage.py
├── static
│   └── icon
│       └── favicon.ico
└── templates

settings.pyの設定

はじめにsettings.pyにstaticディレクトリのパスを設定します。

import os
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]

また、テンプレートファイルを読み込むためにTEMPLATESにDIRSを設定します。

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

テンプレートの設定

templates/index.htmlは以下のファイルを作成します。

{% load static %}
<html>
    <head>
        <link rel="icon" href="{% static '/icon/favicon.ico' %}">
    </head>

    <body>
        <h1>Hello</h1>
    </body>
</html>

HTMLを表示するための設定

HTMLの出力のためにアプリを作成します。

以下のコマンドでアプリを作成します。

python manage.py startapp hello

views.pyの設定

hello/views.pyに以下のコードを追加します。

from django.shortcuts import render

def index_template(request):
    return render(request, 'index.html')

urls.pyの設定

hello/urls.pyはないはずなので、以下のコードを新規で作成します。

from django.urls import path
from . import views

urlpatterns = [
    path('view/', views.index_template, name='index_template'),
]

新規でURLを設定するので、app/urls.pyには以下の修正のように修正します。

urlpatterns = [
    path('admin/', admin.site.urls),
    path('hello/', include('hello.urls')),
]

動作確認

それでは一通り必要なファイルを用意したので、以下のコマンドでアプリを起動します。

python manage.py runserver

localhost:8000/hello/view/にアクセスして、以下のようにタブにアイコンが表示されればOKです。

まとめ

アイコンに限らず、staticファイルを扱うときには

  • STATICFILES_DIRSでstaticディレクトリのパスを設定する
  • staticファイルを読み込むHTML上で{% load static %}使いstaticディレクトリのパスを呼び出す
  • staticファイルを読み込むときには{% static 'ファイルパス' %}を使う

を守れば大体のファイルは読み込めるはずです。

Discussion