Webサイトを作成した際、お気に入りリストやブラウザのタブ、スマホの待受画面に表示されるアイコンの設定は忘れていませんか？

近年、スマートフォンユーザーが圧倒的に多いため、アイコンの設定はWebサイト作成には欠かせない存在になりました。
今回はそんなうっかり忘れがちなファビコンとWebクリップアイコンについて紹介します。

Webクリップアイコン・ファビコンとは

Webクリップアイコンとは

スマートフォンやタブレットなどで、Webサイトのショートカットをホーム画面に追加する場合に、ホーム画に表示されるアイコンのことを言います。

Webサイト制作時に、Webクリップアイコンの設定をしていない場合にホーム画面にショートカットを追加すると、Webサイトのスクリーンショットになります。
その場合は見た目がいまいちですし、あとから見たときになんのWebサイトかわからなくなるため、好ましくありません。

ファビコン（favicon）とは

favorite icon(フェイバリット・アイコン）の略です。
Webサイトと開いた際に、ブラウザのタブに表示される小さなアイコンのことをいいます。

ファビコンを設定しておくことで、複数のタブを開いているときに何のページだったか判断しやすい目印になります。

また、ユーザーがお気に入り登録をしてくれた場合も、ファビコンがあるほうが見つけやすくなるため、Webサイト作成には必須の設定です。

Webクリップアイコン・ファビコンの画像サイズ

Webクリップアイコンの画像サイズ

• 57px×57px

ファビコン（favicon）の画像サイズ

• 16px×16px
• 32px×32px
• 48px×48px
• 64px×64px

ファビコンは記の他のサイズを利用される場合もありますが、一般的に上記4サイズがあれば問題ありません。
それぞれ、ブラウザのタブ、ブックマークであったり、Windowsのショートカットアイコンなどに適したサイズです。

Webクリップアイコン・ファビコン設定方法

アイコン画像の簡単な作り方

Webクリップアイコン・ファビコンを設置するに当たりは何種類かサイズを作成する必要があるため、一枚一枚作っていると少し手間がかかります。

そこでこのような一括で複数のサイズの画像を作成してくれるツールを使用すると便利です。

使い方は、1枚の画像をアップするだけです。

設定方法

作成した画像を、サーバーのルートディレクトリに設置します。
（配置した場所のパス（ファイル名）と画像名があれば設置できます。）

その後、\htmlのhead内に下記のコードを追記します。

基本のコード

<link rel="apple-touch-icon" href="保管場所のパス / 画像名/">

<link rel=”shortcut icon” href=”保管場所のパス / 画像名/">

Webクリップアイコン・ファビコン（favicon）の設置をお忘れなく

Webクリップアイコン・ファビコン設置は、細かい部分ではありますが、企業ブランディング（コーポレート・ブランディング）の一つです。

設置することでWebサイトやお店をイメージしやすくなり、覚えてもらいやすい・再訪してもらいやすくなります。
また、しっかりとしたWebサイトであると認識されやすいため信頼度も上がるでしょう。
これらにより、WebサイトのPV数アップにつながるかもしれません。

過去に作成したWebサイトをなども含めて、忘れずに設置するようにしましょう。