はじめに
こんにちは！
株式会社ＢＦＴ名古屋支店・インフラ女子（？）のやまぐちです。
アイキャッチ画像のBootstrapは関係なく、HTMLのお話です。
もはや自分のメモ用！次やる時に「あれ？どうやるんだっけ？」とならないように、作成したウェブサイトのブラウザタブに独自のアイコンを設定する方法を書き留めておきます。
完成系はこちら↓↓↓
ブラウザのタブにかわいいアイコンを！
画像の準備
ところで、この「ブラウザのタブのアイコン」を「ファビコン」と呼びます。
昔から「なんでふぁびこん？ふぁみこん？ふぁぶ/
あいこん？」と思っていましたが、そういう言葉があるんですね。
「favicon.ico」というファイル名とし、タブや閲覧履歴に表示する画像に使用されます。
というわけでまずは画像ファイルを作成してファビコンに変換です。フリーの変換サイトはいくつかありますが今回は以下のサイトを使用いたしました。
favicon-generator.mintsu-dev.com
ブラウザに使用するアイコンは16px角（Retinaというブラウザは32px角）です。元画像も可能な限り正方形で高解像度で作成しておきます。
変換したファイルをダウンロードし、アプリケーションが参照できる場所に「favicon.ico」を置きます。（今回の配置場所はDjangoでアプリケーションを作成しているため、<アプリのRoot>/static/favicon.ico）
htmlの書き方
指定の仕方はとっても簡単。
headタグ内に<link rel="icon" ref="/static/favicon.ico">と書くだけ！
<html lang="ja"> <head> <meta charset="utf-8"> <link rel="icon" href="/static/favicon.ico"> <title>{% block title %}{% endblock %}</title> </head>
タイトル（タブの文字）自体は別のHTMLファイルに記載しています。
ちなみに別HTMLファイルに記載しているタイトル部分はこちら↓↓↓
{% extends 'base.html' %}
{% block title %}こんどるうぇぶ りすと{% endblock %}
Djangoでは共通部分（base.html）に{% block title %}{% endblock %}と書くことで個別の内容を各ページ（今回は list.html）に記載することができます。
終わりに
こちらのサイトが参考になりました！
テンプレートもたくさん紹介してくださっているので、デザインの参考にしたいと思います。
短いですが本日はここまで。
ありがとうございました～ -^ ^
