こんにちは。ワッカデザイン「デザインことはじめ」編集部です。

ホームページを閲覧時に、タブのタイトルの左にアイコンが表示されるのを見たことはありませんか？このアイコン、実はホームページのリピーター対策や企業のブランディング構築にも繋がるものなので意外と重要です。
今回はそのホームページのアイコンについて、役割やメリット、簡単な設定方法をご紹介しますね。

ホームページのアイコン(ファビコン)とは？

ホームページのアイコンは、小さなイメージ画像によりホームページを識別させるためのシンボルであり、「ファビコン」とも呼ばれます。

アイコン(ファビコン)の表示場所

ホームページのアイコンは、ブラウザのタブの一番左側やブックマーク一覧に表示され、ほかにもPCのデスクトップでのショートカットアイコン、スマートフォンのホーム画面に置かれるアイコンなどがあります。

アイコン(ファビコン)を設定するメリット

次に、アイコン（ファビコン）を設定するメリットをご説明します。

①認知度を向上させる
ホームページにアイコン（ファビコン）があれば、訪問者に対して企業のイメージを植え付けられます。
アイコン（ファビコン）が、ブックマークやショートカット、ホーム画面などいろんなところに設置されることにより、訪問者からは見つけやすくなり、瞬時に「〇〇社のホームページ」であると認識しやすくなります。

②リピート率が向上する
アイコンがあることで、ブックマークにしてもブラウザにしても複数の中から目的のページを識別しやすくなります。また、アイコンを覚えてもらうことで文字だけでは思い出せないサイトも「過去に見たものだ」と思い出しやすくなります。その分、多くの再訪問を期待できます。

ホームページ制作の上で、アイコン（ファビコン）設定は必須ではありませんが、企業がホームページを作る場合はメリットが大きいので、設定することをお勧めします。

アイコン(ファビコン)の設定方法

さて、次はアイコンの設定方法についてです。

まずは、設定したいアイコンやファビコンを用意します。表示させる場所によって「favicon.ico」と「apple-touch-icon.png」の2種類の画像を使います。

①favicon.ico
一つ目は「favicon（ファビコン）」です。拡張子は「ico」。すべて正方形ですが、表示される場所により最適なサイズが異なるため、サイズは１つに定められません。代表的なサイズをご紹介します。
 16px×16px：各ブラウザ（Edge、Google Chrome、Firefox）のタブ、Safariの履歴
 32px×32px：ブックマークアイコン
 48px×48px：Windowsのスタート画面のピン留めなどに使われるもの

②apple-touch-icon.png
二つ目は「ウェブクリップアイコン」と呼ばれるiPhoneやiPadなどのiOSやAndroidスマホのホーム画面に使われるアイコンです。サイズは180px×180pxの1サイズを用意すればデバイスごとに自動的にリサイズされます。

企業ロゴがあればロゴのデータを基に作成するとアイコン画像の用意も簡単です。企業ロゴがない場合はロゴ作成を優先することをお勧めします。

さあ、画像を用意出来たら、いよいよ設定に入ります。
次はホームページをHTMLファイルで作っている場合とWordPressで作っている場合での設定方法についてそれぞれ解説をしますね。

1.HTMLファイルで作成したホームページへのアイコン設定
（1）「favicon.ico」と「apple-touch-icon.png」の2つのファイルを、ホームページのルートディレクトリ（一番上のディレクトリ）にアップロードします。
（2）次に、HTMLファイルのheadタグ内にコードを書き込みます。表示させたいページのheadタグ内に、以下のコードを記述します。
 <link rel="icon" type="image/x-icon" href="./favicon.ico">
 <link rel="apple-touch-icon" href="./apple-touch-icon.png" sizes="180×180">

上がファビコンの設定、下がアイコンの設定です。ファイルを更新すると設定完了です。

ファビコンをPCで設定する場合、「favicon.ico」というファイル名でルートディレクトリに設置するだけでホームページの全ページにファビコンが表示されます。しかし、スマートフォン等では自動的に全ページに適応されないブラウザもあるので、できるだけ全ページのheadタグ内にアイコン（ファビコン）のコード記述をしておくことをお勧めします。

2.WordPressで作成したホームページでのアイコン設定
WordPressでホームページを作成している場合、WordPressの管理画面からアイコンを設定できます。
512px×512pxの画像を用意します。拡張子は「png」です。管理画面から「外観」→「カスタマイズ」→「サイト基本情報」→「サイトアイコン」と進み、png画像をアップロードします。これで設定完了です。

ただし、スマホのショートカットアイコンにも適用させたい場合は、WordPressのheadタグ内に1-(2)の方法でコードを記述しましょう。

以上、アイコン（ファビコン）の設定方法について簡単にご紹介しました。

まとめ

いかがだったでしょうか。今回はホームページで後回しにしがちなアイコン（ファビコン）についてご説明しました。
ブラウザのタブやブックマーク一覧、PCのデスクトップやスマートフォンのホーム画面で表示されるアイコンは、設定必須ではありませんが、識別のしやすさ・印象付けによる企業のブランディングやホームページのリピート率の向上などメリットが多いです。ぜひ、これを機に設定を検討してみてください。

ワッカデザインは、ホームページ制作・Web広告制作の経験も多数あります。
「ホームページのアイコンを設定したい」「企業ロゴを検討したい」といった場合には、お気軽にワッカデザインにご相談くださいね。