Djangoで作成したオリジナルのwebサイトのブラウザのタブにfavicon(ファビコン)を設定する方法を紹介します。
タブにfavicon(ファビコン)があるかないかで、webサイトの印象度は大きく左右されます。
ぜひ今回の解説を読んでfavicon(ファビコン)を設定してみてください。
コンテンツ
favicon(ファビコン)とは
そもそもfavicon(ファビコン)ってなに？って人のために解説します。
以下のYahoo!JAPANのサイトをクリックしてみてください。
ちなみにfavicion(ファビコン)はPCでもスマホでもどちらでも見えますが、PCの方がスマホよりも(というかスマホはほぼ見えなくて気にならない)鮮明に見えますのでPCを利用しての確認を想定しています。
ブラウザで新規タブが開くと思いますが、Yahoo!JAPANは、以下の画像のY!の文字が、Google.comだとカラフルなGの文字が見えます。
(ちなみにChromeブラウザを使用)
Djangoで個人開発を進めている場合、何も設定をしないと下記のように地球儀らしきものが見えているはずです。
favicon画像
favicon(ファビコン)ってなんぞやってところがわかったところで早速実装をしていきます。
画像サイズ
faviconのサイズに関してですが、実はブラウザ毎にサイズが違っているってご存知でしょうか？
「favicon ブラウザ サイズ」などで検索すると出てきますが、ここでは総体的に一番多く利用されているであろう、Chromeブラウザの32px × 32px の画像を用意して進めていきたいと思います。
画像拡張子
「.png」「.jpg」などのような一般的に認知されている拡張子も利用できますが、マルチアイコンとして利用できる「.ico」に変更をしておきます。
favicon(ファビコン)の設定方法
ここからがいよいよ本題です。
画像のアップ
画像を用意できたら指定のディレクトリに用意した画像をアップします。
今回私の場合は、static/imagesというディレクトリに画像をアップしました。
headタグに設置
画像がアップできればあとは、htmlのhead箇所にlinkタグを指定して画像のpathを書いてあげれば反映させることができます。
sample.html
|
1 2 3 4 5 6 7 8 9 |
{% load static %} <!DOCTYPE html> <html> <head> <!-- favicon --> <link rel="icon" href="{% static 'images/favicon.ico' %}"> </head> </html> |
設定した状態で、ブラウザをリロードするときちんとfaviconが反映されていることを確認できます。
これだけ。
めちゃくちゃ簡単です。
以上。
最後に
いかがでしたでしょうか。
以上が、「【Django】ブラウザタブのfavicon(ファビコン)の設定方法」の紹介記事になります。
プログラミング学習を効率良く進めるには…
私ヒロヤンがプログラミングを始めた頃は以下のような感じでした。
何から手をつけていいのか、わからない。
プログラミングを始めてみたけど、エラーが解決できない。
そしてネットで調べていくうちに膨大な時間が過ぎていきました。
私ヒロヤンの実体験より、プログラミングを効率的に学ぶために大切なことは以下のことだと考えています。
1. いつまでもダラダラとやらないで、目標を決定して短期集中する
2. マンツーマンで、わからない箇所は直ぐに質問をして即レスをもらう
.proでは私ヒロヤンが学習してきたプログラミング経験0からのpython/django、その他webサイト・サービス開発のコースが用意されています。
カウンセリング自体は無料なので話を聞いてみるだけでもいかがでしょうか？
また以下のリンク先ではdjangoを教えてくれるスクールをまとめ紹介しています。
コメントを残す