Bootstrapモビライズ でのファビコン設定

ファビコンとは？

Webサイト制作でよく耳にするファビコンとは何でしょうか。英語の略語ですが、favorite icon（お気に入りのアイコン）を略してfaviconと呼ばれるようになったようです。
Home画面にお気に入りのサイトをショートカット登録するとアイコンが必要になりますね。この画像アイコンをファビコンと呼びます。

その他大きな用途としては、ブラウザを開いた際のタブの左側に出る画像もファビコンになります。タブを複数開いてブラウジングしていると、ページタイトルもタブに隠れて見えなくなってしまいます。この場合にもファビコンを設定していると、視覚的にお気に入りのサイトを見つけることができるので大変効果的です。ファビコン設定があるのとないのでは大違いですね。

Bootstrap CMSモビライズでも簡単にファビコンを設定できますので、その方法をここでご紹介します。

高まるファビコン重要性

Mobiriseでの設定方法に進む前に、ファビコンが検索エンジンマーケティングにおいて重要性を増してきている背景をお伝えします。
2019年5月にGoogleはモバイル検索結果画面のページ仕様を大きく変更してきました。検索結果ページに、サイトのファビコンを掲出するという仕様変更です。

従来は、ページタイトル、URL、サイト説明文の３セットで結果ページが表示されていましたが、これにファビコン画像が加わりました。同じような説明文のサイトであれば、ファビコン画像がある方が視覚的にアピールできますので、訪問数の増加につながる可能性があります。

ファビコン画像の仕様

ファビコン画像はGoogleがそのレギュレーションを規定しています。代表的な注意点をチェックしておきます。
◆　画像は正方形の形状で作成する（例64×64pixel）
◆　画像サイズは48pixelピクセルの倍数で作る
◆　画像サイズは最低32pixelピクセル以上
◆　対象サイトのブランドを表したデザインである
◆　デザインは公序良俗に反しないこと

これらを遵守して最適なファビコン画像を用意するようにしましょう。

どうやってファビコン画像を作成？

ファビコン作成専用のツールもあるが画像配布サイトが便利

一般的にはショップサイトやブランドサイト、コーポレートサイトの場合、最低限ロゴ画像はお持ちであると思われますので、その画像を採用するのがベストです。
正方形の画像に加工し、サイズは16の倍数、例えば96×96pixelピクセルサイズの画像を用意しましょう。ブラウザ上では16×16pixelのサイズで表示されることになりますが、こちらはGoogleが自動的に画像サイズを調整してくれます。ロゴ画像がない場合はゼロからの作成が必要になりますが、デザインも大変ですし、Photoshopを用意したり専用のファビコン作成サイトに登録したりと手間です。
この場合、フリーのアイコン画像サイトを利用すると便利です。無料でダウンロードできますし、海外デザインの豊富なアイコンからアイデアを得ることができますよ。iconarchive.comは特にオススメです。pngあるいはsvgファイルのいずれかからお好みのアイコンを選びましょう。

モビライズでのファビコン設定

サイト設定のCommonからファビコンを簡単設定

手動でファビコンを設定する場合には、画像をimageディレクトリにアップロードし、全てのページのヘッダー部分にファビコン用のコードを書かなくてはなりません。
モビライズではこのような手間は一切不要で、画像をワンクリックで差し替えることができます。大変便利ですね。
もちろんGoogleにもしっかりとファビコンとして認識してくれます。