【マーケ用語解説】はじめに
Webブラウザを開いた時に、上部にタブやアドレスバーに表示された小さなマークを見たことがあるという方も多いことでしょう。
この小さなマークは、ファビコンと呼ばれているものです。
ファビコンは、Webマーケティングにおいても重要なものとなるので、理解を深めておきたいところです。
本記事で、ファビコンの概要や重要性、具体的な作成方法や設置方法などについて解説いたします。
【マーケ用語解説】ファビコンって何？
ファビコンは、英語で「favicon」と表記します。
お気に入りを意味する「Favorite」とアイコンを意味する「Icon」を組み合わせた用語です。
主に、ITやWebマーケティングの世界で用いられることが多い言葉です。
企業のロゴ、イラスト、アルファベット、数字など、さまざまなデザインのファビコンがあります。
Webサイトの<head>タグ内に、ファビコンタグを設定することで、Webブラウザのタブやアドレスバーなどに表示される仕組みです。
気になったWebページをブックマークした場合は、ブックマーク一覧側にも、ファビコンが表示されます。
【マーケ用語解説】ファビコンの重要性
ファビコンは非常に小さなマークであるため、軽視されがちです。
中には、ファビコンは不要だと思う方もいるかもしれません。
実は、ファビコンはWebマーケティングにおいてとても重要な役割を持っているのです。
ファビコンを用意しておくことで、そのWebサイトの視認性を高めることができますし、SEOの効果も高まりやすくなるのです。
Webサイト制作や運営などを行う際には、ファビコンの重要性をしっかり理解しておいたほうが良いでしょう。
SEOの効果を上げる
ファビコンは、SEOの効果をアップさせるうえで、欠かせないものとなっています。
SEOは、 「Search Engine Optimization」の省略形のことです。
日本語では、「検索エンジン最適化」という意味があります。
Googleなど検索エンジンを使って検索した際に、自社のWebサイトを上位に表示させることを目的として、さまざまな対策を行うことをSEO と呼んでいます。
2019年5月22日に、Google社は、モバイル検索結果のレイアウト変更を行いました。
その結果、スマートフォンでGoogle検索をした際に、検索結果と合わせてファビコンが表示されようになったのです。
SEOでは、Google対策が重要となります。
ファビコンを設置しておくことで、SEOの結果にも影響を与える可能性が高いのです。
サイトの認識率を上げる
ファビコンは、Webサイトの認識率を高める効果も期待できます。
人間はテキストだけの情報よりも、色や画像などのほうに目がいきやすいと言われています。
カラフルな色や個性的なデザインのファビコンを配置しておけば、自社のWebサイトが多くのユーザーの目に留まりやすくなり、クリック率も上がっていくことでしょう。
ファビコンは、ブックマーク時のアイコン代わりにもなることから、お気に入りのページをすぐに開きたい時の目印にもなります。
さらに、ファビコンはブランディング対策としても活用可能です。
企業ロゴマークやテーマカラーなどをファビコンのデザインに取り入れておけば、自社の認知度も高まりやすくなります。
自社Webサイトをより多くのユーザーに閲覧してもらいたい、自社のブランド力を高めたいと考えているのであれば、ファビコンは設置しておいたほうが良いでしょう。
【マーケ用語解説】ファビコンの作成方法
次は、ファビコンの作成方法について見ていきましょう。
ファビコンは、ただ小さいマークを作れば良いというわけではありません。
ファビコンを作成する際には、適切なサイズや形式に整えておかなくてはならないのです。
画像編集を行うためは、Photoshopやillustratorなどのクリエイティブ関連のソフトウェアも必要です。
そして、作成したファビコンをきちんと表示させるためには、Googleが提唱するガイドラインを守らなくてはなりません。
ファビコンのサイズ
ファビコンは、「16px×16px」や「32px × 32px」などの小さなサイズで作成します。
Windowsパソコンのショートカットアイコンやサイトアイコンでは、「48px × 48px」や「64px × 64px」などのサイズが用いられることもあります。
基本的には、「16px×16px」のサイズで作成しておけば問題ありません。
ファイル形式については、「.gif」や「.png」などの画像形式でも作成可能です。
ただし、一部のWebブラウザでは、これらの形式が非対応となっている場合もあるため注意が必要です。
作成したファビコンは、複数サイズの画像を一つのファイルへまとめることができる「.ioc形式」へ変換しておくのが一番おすすめです。
ファビコンの作成方法
ファビコンを作成する際には、Adobe社のPhotoshopなどの画像編集ソフトが必要です。
ソフトを使って編集を行い、「16px×16px」などのサイズで書き出しを行います。
Photoshopなど画像編集ソフトは、プロクリエイター向けなので、初心者の方は難しく感じるかもしれません。
そのような時は、ファビコン作成ツールを活用するのも手です。
「favicon.cc」や「Favicon generator」などの作成ツールを使えば、簡単なマウス操作だけで、好みのデザインのファビコンを作ることができます。
これらの作成ツールは、お金もかかりません。
そのほかにも、インターネット上にはいろいろなファビコン作成ツールがありますので、使いやすそうなものを探してみると良いでしょう。
ファビコン作成のガイドライン
ファビコンを作成する際には、Google社のガイドラインに沿うようにしましょう。
万が一ガイドラインを無視してしまうと、せっかく作成したファビコンが検索結果に表示されなくなってしまうかもしれません。
Google社は、Search Console ヘルプページにて、「Google がファビコンのファイルとホームページをクロールできること」を推奨しています。
つまり、GoogleをブロックするようなファビコンはNGということです。
デザインに関しては、ウェブサイトのブランドを視覚的に表現したものが望ましいとしています。
わいせつな表現、ヘイト表現などはNGとなり、非表示となるか、デフォルトのアイコンに置き換えられてしまう可能性があるので注意が必要です。
ファビコンのサイズに関しては、48px × 48px、96px x 96pxといったように、48pxの倍数と定めています。
そのほかにも、ファビコンのURL固定も推奨しています。
ただし、これらのガイドラインを厳守したからといって、必ず検索結果にファビコンが表示されるわけではありません。
Google社も、「すべてのガイドラインが満たされていても、ファビコンが検索結果に表示されるかは保証されません。」と注意喚起しています。
ファビコンを作成する前に、Google社が提唱しているガイドラインにひと通り目を通しておきましょう。
【マーケ用語解説】ファビコンの設置方法
最後に、ファビコンの設置方法について、解説いたします。
画像編集ソフトや作成ツールなどで作成したファビコンは、そのままではWebブラウザやお気に入り一覧に表示させることはできません。
Webサイトを構成するHTMLのヘッダー内へ指定のコードを記述する作業が必要です。
記述する指定コードは、Webブラウザによって多少異なります。
ブラウザごとに、記述例をまとめましたので、設置する際の参考にしてみてください。
表示ブラウザがChrome・IE11・Firefox・Safari・Opera・Edgeの場合
Chrome、IE11、Firefox、Safari、Opera、EdgeなどのWebブラウザの場合は、ファビコンの参照元ファイルを「.ico形式」にしておく必要があります。
ただし、IE11の場合は、PNGやGIFなどの画像形式でも問題はありません。
そして、以下のコードをヘッダー部分へ記述してください。
<link rel=”icon” href=“/image/favicon.ico”>
表示ブラウザが「IE9」の場合
Webブラウザが、IE9の場合は、type属性の記述が必要です。
type属性は、MIMEタイプ、入力コントロールの種類、リストのスタイルなどの設定を行う場合に必要な属性です。
ファビコンを設置する際のtype属性の記述は、「type=”image/vnd.microsoft.icon”」となります。
HTMLのヘッダー内に、以下のコードを記述してください。
<link rel=”icon” type=”image/vnd.microsoft.icon” href=“/image/favicon.ico”>
表示ブラウザが「IE8以下」の場合
IE8以下の古いバージョンのWebブラウザの場合は、リンクタグが「link rel=”shortcut icon”」となります。
以下のコードをHTMLのヘッダー部分に記述してください。
<link rel=”shortcut icon” href=”/image/favicon.ico”>
【マーケ用語解説】まとめ
今回は、ファビコンについてお伝えしました。
ファビコンは、「16px×16px」の小さな画像ですが、SEOの効果を上げることやWebサイトの認識率を上げるといった重要な役割を持っています。
自社のWebサイトの検索順位を上げたい場合や多くのユーザーに閲覧してもらいたいのであれば、ファビコンは設定しておいたほうが良いでしょう。
Googleのガイドラインを遵守しながら、ファビコンの作成・設置を行ってみてください。
