CMSを活用:サイトにファビコンを設定しよう！

ファビコンとは

ブラウザを立ち上げて、いくつかのサイトにアクセスしてみてください。
ブラウザの「タブ」にアイコンが表示されているでしょうか？
また、ブラウザの「お気に入り」の中にアイコンが表示されているでしょうか？

もし、ブラウザの「タブ」や「お気に入り」に小さなアイコンが表示されていたら、それがファビコン（favicon）です！

ファビコンのメリット

ファビコンには次のようなメリットがあります。

• サイトの信頼度を高めてくれる
  大きな企業のウェブサイトに多く設定され、きちんとしたサイト、安心感のおけるサイトというイメージを抱いてもらいやすくなります。
  その結果、サイトの信頼度向上につながります。
• ブランドイメージ
  ロゴと同様、ブランドのイメージを視覚的に印象づけることができます。
  小さなファビコンですが、常に「見える」視覚的効果はテキストよりも大きいですね。
• 見つけやすくアクセスしやすい
  ファビコンがあれば、たくさんの「タブ」や「お気に入り」に登録されたサイトの中からでも、簡単に見つけることができます。
  見つけやすいことは、ユーザーからアクセスされやすいことにもつながります。

ファビコンのサイズ

デバイスの多様化とブラウザのバージョンアップなどによって、ファビコンのサイズも様々なサイズが使用されます。

下記はファビコンのサイズおよび使用する場所の一例です。
デバイスや使用する場所、バージョンによっても様々なサイズのアイコン画像が必要となります。

・16px × 16px ブラウザのお気に入り、タブなど
・32px × 32px Windowsデスクトップのショートカットなど
・48px × 48px Windowsのサイトアイコンなど
・57px × 57px iPhoneのアイコン
・72px × 72px iPadのアイコン
・114px×114px iPhoneのアイコン（Retinaディスプレイ）
・152px×152px iPadのアイコン（Retinaディスプレイ）

このように複数のサイズのアイコン画像をico形式で１つのファイルにまとめることができます。
これを「マルチアイコン」といいます。

今回は、ファビコンの設定方法をご紹介してまいりますが、事前にファビコンとして設定するアイコン画像をご準備ください。

※サンプルサイトでは、3つのサイズのアイコン画像からマルチアイコン（favicon.ico）を作成しました。

【準備】アイコン画像の準備

事前にファビコン用のアイコン画像をファイル名「favicon.ico」で作成しましょう。

※今回は、下記のサイズの画像を作成し、マルチアイコン（favicon.ico）を作成しました。
【画像サイズ】16px×16px／32px×32px／152px×152px（PNG形式）

ファビコン設定

編集サイトへログインし、コントロールパネルの[サイト設定]メニューからファビコンを設定することができます。

該当メニュー

• [admin] → [システム] → [サイト設定]

設定方法

1. [サイト設定]メニューをクリックすると、“サイト設定ダイアログ”が表示されます。
2. “サイト設定ダイアログ”の「favicon」項目の[参照]ボタンから、事前に準備したアイコン画像「favicon.ico」を選択すると、サーバーにアップロードされます。
   ※アップできるファイル名は「favicon.ico」のみとなります。
3. 一般公開（再構築）を行ってfaviconの設定を反映させます。
   ※設定したfaviconは再構築で反映されますが、ブラウザのキャッシュの影響が大きいため、変わらないまた表示されない場合はキャッシュを削除するか、別のブラウザなどでご確認ください。

こんなときは・・・

設定したファビコンを削除したい

設定ふしたファビコンを削除する場合は、ドキュメントルートにFTPでアクセスし、直下にあるfavicon.icoファイルを直接削除をすると、対象とするファイルがないため設定していない状態になります。

ただし、一度設定したサイトを閲覧していると、キャッシュにより削除された状態が確認できない場合がございますので、ブラウザのキャッシュや一時ファイル、履歴などを削除した上でご確認ください。