ホームページ（Webページ）を作成する中で、「ファビコン」も作成し設定しておきましょう。
ファビコン（favicon）は、「favorite icon（お気に入りのアイコン）」から作られたようですが、Webブラウザでホームページを開いたときにタブに表示される画像、あるいはブックマークリストの先頭、Web検索結果の各項目の先頭に表示される画像のことです。（下図）
ファビコンは、基本的には「.ico」形式の画像ファイルを使用します。
一般的に 16px×16px のサイズの画像ですが、表示される場所によっては 24px×24px、36px×36px などのサイズも使われることもあります。
そのため、複数サイズの画像をひとつのファイルにまとめられる「.ico」形式に変換し使うことが多いです。
ところが「.ico」形式の画像と言われてもあまり馴染みがないですね。
Photoshopや GIMPなどの画像編集アプリを使うとすぐに作れるのですが、これだけのために Photoshopや GIMPに手を出すのも躊躇します。
そんなとき、用意した画像ファイルを「.ico」形式に変換してくれる Webサイトを利用するとよいでしょう。
よく使われる変換サイトを 2つだけ上げておきます：
それでは、試しに作ってみましょう。
Googleの関連ページのガイドラインによると、
ファビコンのサイズは 48 x 48 ピクセルの倍数にしてください（例: 48 x 48 ピクセル、96 x 96 ピクセル、144 x 144 ピクセルなど）（またはアスペクト比 1:1（スクエア）の SVG）。有効なファビコン形式であれば、すべてサポートされます
‥‥とのことです。
ファビコン画像のファイルが用意できたら、ホームページの <head>～</head> 内に
<link rel="icon" href=“images/favicon.ico">
のような感じで書き入れます。
なお、Chrome・Firefox・Safari・Opera・Edge などのブラウザでは、「.ico」形式の画像でなくても PNG形式や GIF形式の画像を以下のようにして使うことも可能です。
<link rel="icon" type="image/png" href="images/favicon.png">
<link rel="icon" type="image/gif" href="images/favicon.gif">
試しに、下図のような画像「cafe-icon.png」を作ってみました。
これを、ホームページの <head>～</head> 内に
<link rel="icon" type="image/png" href="images/cafe-icon.png">
すると、下図のように Webブラウザのタブにファビコン画像が表示されました。
