こんにちは！WEBデザイナーのこたです。
WEBサイトを作成したあとに、最後にファビコンの設定をしていますか？
ファビコンとは下記画像のようなアイコンのことです。
そのサイトのアイコンという位置づけになり、ブラウザのブックマークや、アドレスバーに設定される画像です。
画像のフォーマットにはICO形式にするのが一般的です。
ICO形式ってどうやって作成するのかもご説明いたしますね！
HTMLファイルでのファビコンの設定
書式
<link rel="shortcut icon" href="/favicon.ico" type="image/vnd.microsoft.icon">
ファビコンを設定するには、HTMLの<head>~</head>の中に、<link rel="shortcut icon">を追加します。
この<link>タグにはhref属性とtype属性をいれましょう。
href属性には、ファビコンの画像のパスを指定します。type属性は、ファビコンにICO形式の画像を使用するなら常に「image/vnd.microsoft.icon」です。
ファビコン画像は一般的にそのWebサイトのルートディレクトリに保存しましょう。
ファビコン画像の作り方
ファビコンの「.ico」ファイルはphotoshopやIllustratorでは作成できません。
Mac では標準でインストールされている「プレビューapp」で作成できます。
もっと簡単な方法はWebサービスを使用して作成する方法です。
「ファビコン 作成」で検索すればファビコンを作成できるWebサービスが多数出てきます。
僕がいつも使用しているWebサービスはこちらになります。
注意：ファビコンは設定しなくても読み込まれる
主要なブラウザはHTMLにファビコンを設定しなくても、ルートディレクトリにファビコンがあるかどうかを自動で探してしまいます。
そのためルートディレクトリにファビコンがない場合は「ファイルが見つからない」というエラーが発生します。
このエラーは発生するまでに少し時間がかかることから、若干のページの読み込み速度が遅くなるといわれています。
また、存在しないファイルをWebサーバーから一生懸命に探すことになるので、わずかですがサーバーの負荷が増大します。
ファビコンは「飾り」ではなく「必ず作る」と考えておくといいかもしれませんね！
