最後に、作成したサイトにファビコンなどのアイコンを設定していきましょう。
サイトのアイコンとは
Webサイトへのショートカットや目印のように表示されるアイコンです。
中でも代表的なものが、ブラウザのタブやお気に入りリストなどでサイト名の隣に表示されるファビコン（Favicon）と呼ばれるアイコン。それ以外にも、スマホのお気に入りなどで表示されるWebサイトのアイコンもあります。
サイト作成時に設定しておきたい最低限のアイコンは、以下の2種類。
①ファビコン
ブラウザのタブなどに表示されるWebサイトごとに設定可能なアイコン画像。 お気に入り（favorite）に登録したときに表示されるアイコン（icon）=favorite icon（フェイバリット・アイコン）が短縮されてファビコンと呼ばれています。
②apple-touch-icon
Webサイトをお気に入り画面やホーム画面に追加した時に、アプリと同じようにアイコン表示される時の画像です。単にtouch-iconと読んだり、Web Clipアイコンとも呼ばれています。
プラスしてAndroidのChrome用アイコンとWindows用アイコンを加えるケースもあります。 こちらは、スタート画面にサイトをピン止めにした時などに表示されるアイコンです。
今回はファビコン、apple-touch-icon、Android用の３つを設定してみましょう。
アイコンの種類は多い
パソコン（win/mac）、タブレットやスマホ（iOS/android）それぞれに表示されるWebサイトのアイコンを、細かく設定しようとすると必要なアイコンは20種類以上。ブラウザ更新や新端末登場によっても変わるので、今後さらに増える可能性もあります。
各所に必要なアイコンのサイズについては、早見表を作ってくださっている方も多くいらっしゃいます。 もっと細かく設定したいという方は検索してみて下さい。
https://webnaut.jp/design/1178.html
アイコンを作成する
ファビコンやtouch-iconはブラウザやデバイス・配置場所に合わせて様々なサイズで表示されるものです。 設定すべきサイズもそれぞれに異なっているので、個別に１つずつ作っていくのはすごく大変。
ですので、大きいサイズで画像を１枚作ってしまって、目的に合わせてサイズを縮小して使用するケースが多いです。 favicon generatorなど、ネット上にはフリーで使える一括変換ツールも色々と公開されています。
今回、実際に設定するアイコンのサイズは310pxまでです。 が、推奨サイズが年々大きくなっており、上記の「favicon generator」では“512x512～700x700ピクセル画像が推薦サイズ”とされています。
大きいサイズで作っておいて縮小する分には問題ありませんので、推奨サイズ最大の700px×700pxで画像を作成してみましょう。
背景を透明にして透過ファイルにも出来ます。
作成したファイルは保存して、png形式で書き出します。
作成中のファイルサイズだと大雑把すぎるようにも見えますが、 ファビコンであれば最小16px×16pxまで縮小されます。 細々と作り込んでも潰れてしまうので、分かりやすいものの方が良いでしょう。
png形式で保存したアイコンは、Web用にあるファビコン変換ツールを活用させてもらうなどして、色々なサイズ・拡張子に変換します。
以下は「favicon generator Codex」を使用して進めていきます。
URL：https://ao-system.net/favicongenerator/
サイトを開いて「画像ファイルを選択」をクリック。 画像選択のウィンドウが表示されるので、png形式で保存したアイコンを選択します。
画面に選択したアイコンが表示されたら、「ファビコン一括生成」をクリック。
プレビューが表示されます。
画面を下にスクロールするとダウンロードボタンがあります。
クリックすると「favicons.zip」というフォルダがダウンロードできます。
アイコンを設定する
1.アイコンの移動
ダウンロードした「favicons.zip」を開いて中を見てみましょう。
下図のように50個以上のアイコン用画像が入っているはずです。
この中から今回使用する３つのファイルを探し、
Bootstrap課題を入れているフォルダの内の画像フォルダへと移動させてください。
2.アイコンの設定
では、HTMLファイルにアイコンを指定する記述を加えましょう。
書く場所は<head> ～ </head>間です。
<!-- ファビコン -->
<link rel="shortcut icon" href="img/favicon.ico">
<!-- Android用 -->
<link rel="icon" type="image/png" href="img/android-chrome-192x192.png" sizes="192x192">
<!-- iOSタッチアイコン -->
<link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png">
※画像パス等はフォルダ名に合わせて変更してください。
ブラウザで表示して確認してみましょう。
ファビコンが反映されました。 もしも表示が気に変わらない方はブラウザのキャッシュクリア→HTMLファイルをブラウザで開き直してみて下さい。
補足：その他のアイコンについて
windowsでWEBサイトをスタート画面にピン留めした用のアイコンは、以下のように４通りのサイズを記述します。
<!-- windows8,10でスタート画面にピン留めした時の設定 -->
<meta name="msapplication-square70x70logo" content="img/site-tile-70x70.png">
<meta name="msapplication-square150x150logo" content="img/site-tile-150x150.png">
<meta name="msapplication-wide310x150logo" content="img/site-tile-310x150.png">
<meta name="msapplication-square310x310logo" content="img/site-tile-310x310.png">
この画像も一括変換のフォルダに含まれているので、使う場合は制作中のフォルダへ移動させてください。
MacのSafariに追加されたページピン（タブ固定）用のアイコンの場合は、少し特殊。 pngやicoではなく「SVG」形式の画像を使用します。
linkタグの記述については、以下のように書きます。
<link rel="mask-icon" href="【アイコン名.svg】" color="【アイコンの色 - #000000など】">