サイトの印象を左右するファビコンの設置

ブラウザでWebサイトを訪問したときタブに表示されるアイコンのことをファビコンといいます。

Webサイトを作る上で必須ではありませんが、サイトの印象を与える効果的なもので、ブックマークしたときに一覧から見つけやすくもなります。

また、スマートフォンのホーム画面にWebサイトを登録した際に表示されるアイコンは「apple-touch-icon」といいます。

画像を用意するまでの大きな流れ

Photoshopなどで「正方形」「64ピクセス以上のサイズ」で画像を制作します
その画像をWebツール（X Icon editor）でico形式に変換
適切な場所にファビコンファイルを配置
適切なパスを書き<head>内に上記のコードを書く

ico形式に変換する方法

まず.icoという見慣れないファイルを作る必要があります。
（必要がない事もありますが少々面倒になります。）

このサイト（X Icon editor）にアクセスし、右側の「Import」からPhotoshop等で作成した画像を選択します。
範囲をドラッグで設定します。決まったらOKボタンを押下します。
そして「Export」ボタンからファビコンデータをダウンロードします。

色々なデバイスファビコンを表示させるために何種類かタグの書き方がありますが、ここではよくある書き方をします。

コード書く場所

まずファビコンを指定する下記のコードを書く場所は、<head>の中です。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>はじめまして</title>
    <!-- ファビコン用 -->
    <link rel="icon" href="./favicon.ico">
  </head>
  <body>
    
  </body>
</html>

<head> の中のタグ（<meta>や<title>など）の順番は順不同です。

パスは適宜変更し、設置してみてください。