ブランディングに必須!ファビコンの設定

ファビコンは、ブックマークやWebサイトの名前の横に並ぶ小さなアイコン画像です。すごく小さい部分なのですが、ファビコンを設定するのを忘れるとせっかく綺麗なデザインでWebサイトが出来上がっても、ブランドが損なわれることになるので、忘れずにやっておきましょう。リピーター対策にもなり、ブランディング構築にも繋がります。

ファビコンは主に以下の場所で使われます。ファビコンがどこに使われているかが分かっていれば、その重要性が理解できるでしょう。

  • ブラウザのタブ
  • ブックマークのテキスト横のアイコン
  • 検索結果ページのタイトル横
  • スマホからのショートカットを作成した際のアイコン

最近は、変換サービスがありますので、作り方は簡単です。
ロゴマークなど正方形に近い画像を用意してください。サイズは、500ピクセルほどあれば十分です。

変換ツールサービスはWebにいくつもありますが、今回は、Favicon Generator. For real. というサービスを利用します。

https://realfavicongenerator.net

さきほど用意した500ピクセルの大きさの画像を選択し、変換をすると、複数のサイズ、フォーマットで必要なアイコンが一括生成されます。記述に従って全てを利用しても良いのですが、使用頻度の高くない記述もありますので、最低以下の3つのみ設定します。

・android-chrome-192×192.png
・apple-touch-icon.png
・favicon.ico

ダウンロードしたフォルダから上記の3つのみを取り出して、Webサイトの任意のフォルダに配置し、HTMLのヘッダー内に以下の記述をします。画像のパスは環境に合わせて置き換えてください。

<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png">