django favicon設定 備忘録

python

djangoでfaviconがうまく設定できなかったがいろいろやったらできるようになったので載せておきます。

うまくいかなかった例

GIMPでロゴをicoで出力し

<link rel="shortcut icon" href="{% static 'image/favicon.ico' %}" />

をheadタグ内に記述。

もちろんstteing.pyには

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

を記述してありました。

ブラウザのタブにアイコンが表示されなくてコレ

今よく思えばもうちょっとhtmlのfaviconについて調べれば野かなとは思う(いまだに調べてないが)

解決方法

RealFaviconGeneratorを使用する。

1.画像を読み込む

2.こんな感じになるのでそれぞれ適宜設定する

3.パスを設定する。

djangoなので{% static 'image/と入力していますが、あとで直す速度考えても大した速度差ないのでimage/だけでも良かった説
入力したらnext

4.ダウンロードとコピペ

ダウンロードしたzipを上記で入れたパスに回答し、ページ上のHTMLをコピーします。

5.HTMLをペーストし、修正する

<link rel="icon" type="image/png" href="/{% static 'image/favicon-48x48.png" sizes="48x48" />
<link rel="icon" type="image/svg+xml" href="/{% static 'image/favicon.svg" />
<link rel="shortcut icon" href="/{% static 'image/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/{% static 'image/apple-touch-icon.png" />
<link rel="manifest" href="/{% static 'image/site.webmanifest" />

<--上記では動かないので下記のようにdjangoのフォーマットに直す-->

<link rel="icon" type="image/png" href="{% static 'image/favicon-48x48.png' %}" sizes="48x48" />
<link rel="icon" type="image/svg+xml" href="{% static 'image/favicon.svg' %}" />
<link rel="shortcut icon" href="{% static 'image/favicon.ico' %}" />
<link rel="apple-touch-icon" sizes="180x180" href="django_faviconapple-touch-icon.png' %}" />
<link rel="manifest" href="{% static 'image/site.webmanifest' %}" />

まとめ

たぶん512x512でつくってたからサイズがダメだったと思う(調べてないけど)
やくだったら幸いです。

python