ファビコン(favicon)とは、Webブラウザで新規タブを開いたときにタブに表示される画像またはWebページをブックマークした際に表示される画像などをいいます。
2019年5月には、Googleの仕様が変わり、ユーザーの検索結果画面にも表示されるようになりました。そんなファビコン(favicon)の概要や表示される場所・作成方法・作成ツール・設定の方法などを解説いたします。
目次
ファビコン(favicon)とは、「Favorite icon(お気に入りのアイコン)」が派生したIT・Webマーケティング用語で、internetExplore5から追加された機能です。インターネットに接続し、Googleなどのブラウザを開いた際にブラウザのタブに表示されます。
そのほかにも、Webページを使用ブラウザの「お気に入り」や「ホーム画面」に設定したときにも表示されます。ブラウザを開いたときにタブに表示されるファビコン(favicon)は以下の画像です。
上記画像の赤枠内のように、指定Webページやサイトを正方形の画像で表すのがファビコン(favicon)です。ファビコン(favicon)は設定しなくても、Webページやサービスを公開することはできますが、一般的には多くのWebページで設定がされています。
それでは、改めてファビコン(favicon)が表示される場所についてご説明します。いくつかの場所に表示されますので、確認して起きましょう。
もっともファビコン(favicon)を目にする機会が多いのが、「Webブラウザでページを開いた際にアドレスバーやタブ部分に表示されるファビコン(favicon)」でしょう。後ほどご説明しますが、ファビコン(favicon)は、下記のように表示させる方法がいくつかあります。
検索ブラウザが異なると個別に設定をしなければならないケースがありますが、いずれも同じくタブを開いた際のアドレスバーやタブ部分に設定したファビコン(favicon)が表示されます。
上記画像に表示されるように、ファビコン(favicon)は、Webページをブックマークしたときにも「ブックマーク一覧」に表示されます。ブックマークとは、ユーザーが指定のWebページを今後何度もチェックすることや、いわゆる「お気に入り」として保管・整理しておきたいときに行なう作業です。
Webページのアイコン画像となるファビコン(favicon)は、ユーザーの「ブックマーク一覧」に表示されますので、一目でユーザーの目につきやすい画像を設定することで、PV(ページビュー)数の増加に好影響を与えることと思います。
新しくファビコン(favicon)が表示されるようになったのが、スマートフォンでGoogleの検索エンジンを使用した際に検索結果に表示されるようになったことです。英語版ではありますが、Googleの公式ブログ記事「A new look for Google Search」にて、2019年5月22日に発表されています。
これまでは、スマートフォンでGoogleを使い情報を検索した際には、「ページのタイトル」「URL(パンくずリスト)」「メタディスクリプション」のみが表示されていました。
しかし、新しい表示機能では、一番上に「ファビコン(favicon)+ URL(パンくずリスト)」「ページのタイトル」「スニペット」という表示順に変更となったのです。パンくずリストが設定されていないWebページもしくはTOPページの場合は、URLが表示されます。
なお、日本語以外のWebページ表示の場合は、URLの箇所はサイト名がパンくずリストの先頭に表示されていますが、日本語のWebページ表示の場合は、URLそのものがパンくずリストの先頭に表示されます。
新しい検索結果へのファビコン(favicon)表示を受けて、ファビコン(favicon)画像がPV(ページビュー)数などのSEO効果により影響を与えるようになったと言えるでしょう。
PCではブラウザのお気に入りやタブ上にのみ表示されていたファビコンですが、2023年2月頃から検索結果上のサイト情報にも表示されるようになり、より一層サイト情報が視覚的に認識しやすくなりました。
Webサイトの認知を高める意味でも、ファビコンの重要性はさらに高まると言えます。
それでは次に、ファビコン(favicon)を実際に作成する方法について解説していきたいと思います。一般的な作成の流れを押さえて、Webページ・サイト運営にファビコン(favicon)を取り入れてみましょう。
ファビコン(favicon)は一般的には「16px × 16px」のサイズで使用されることが多いですが、表示される場所によっては「32px × 32px」や「24px × 24px」で使用されることもあります。
そのため、複数サイズの画像をひとつのファイルにまとめることができる「.ico形式」に変換し使用するべきでしょう。「.ico形式」の画像ファイルを使用することで、HTMLに記述する際に設定の手間が省けます。
ファビコン(favicon)はPhotoshopなどのツールでイチから作らなくても簡単に作成することのできるツールがいくつもあります。おすすめのツールは後ほどご紹介しますが、便利なツールを使うのがよいでしょう。
先ほどもご説明したように、ファビコン(favicon)はGoogleの新しい仕様によって、検索結果画面の先頭に表示され、SEO流入にも大きな影響を与えることが予想されます。
そのため、「Webページ全体のイメージと統一性がある」「可視性の高いシンプルなデザインにする」「なるべく目を引くような色合いにする」など、情報を検索するユーザー視点に立ったファビコン(favicon)作成が必要でしょう。
ファビコン(favicon)を作成するにあたり、Googleがガイドラインを発表しています。Googleのガイドラインを守って作成を進めていけるように、ここで内容を確認しておきましょう。
Googleが提唱するファビコン(favicon)作成のガイドラインにつきましては、Search Console ヘルプに掲載されている「検索結果に表示されるファビコンを定義する」を参考にしています。これは、2019年5月に変わった検索結果の表示に対してのガイドラインです。その内容については以下となります(本文引用)。
- Google がファビコンのファイルとホームページをクロールできること(Google をブロックしないこと)。
- ファビコンがウェブサイトのブランドを視覚的に表したものとなっており、ユーザーが検索結果を見た際に一目でサイトを見分けられるようになっていること。
- ファビコンのサイズが 48 ピクセルの倍数になっていること(例: 48 x 48 ピクセル、96 x 96 ピクセル、144 x 144 ピクセルなど)。SVG ファイルの場合は、サイズに関して特別な指定はありません。有効なファビコン形式は、すべてサポートされています。Google では画像サイズを 16 x 16 ピクセルに変換するため、その解像度で適切に表示されるか、あらかじめご確認ください。16 × 16 ピクセルのファビコンは指定しないでください。
- ファビコンの URL は固定されている必要があります(URL は頻繁に変更しないでください)。
- わいせつな表現やヘイト表現に関連するシンボル(例: かぎ十字章)などの不適切なファビコンは表示されません。該当する表現がファビコン内で見つかった場合は、デフォルトのアイコンに置き換えられます。
なお、上記ガイドラインを全て満たしていても、確実にファビコン(favicon)がGoogleの検索結果画面に表示されるとは限らないとのことです。
それでは次に、ファビコン(favicon)を簡単に作成することができるツールについていくつかご紹介していきます。記事で紹介するツール以外にも、便利なツールはありますので、ぜひご自身でも調べてみてください。
引用元:favicon.cc
「favicon.cc」は海外のファビコン(favicon)作成ツールです。使用には会員登録やツールのダウンロードが必要ないため、すぐに手軽に使うことができます。
ファビコン(favicon)の作成には、使用するカラーを選択し、ページ中央にある枠内で作成を行ないます。ツールはソフトをダウンロードする必要なく、Web上で使うことができるので、スピーディーに制作をしたい方におすすめです。
「Favicon generator」も海外のファビコン(favicon)作成ツールです。このツールも先ほどと同じく、会員登録やソフトをダウンロードする必要なく、使用することができます。Web上で簡単に使いはじめることができるので、とても便利です。ページ中央の枠内でファビコン(favicon )を直感的に作成できるので、デザインの初心者にも易しいでしょう。
引用元:iconifier.net
「iconifier.net」も海外のファビコン(favicon)作成ツールです。こちらのツールでは、事前にPNG形式の画像(ファビコンのもととなる画像)を用意しておく必要があります。
PNG形式の画像が用意できたら、「iconifier.net」上にアップロードすることで、手軽に「16px × 16px」から「512px × 512px」の多様なサイズのファビコン(favicon)を作成することができます。そして、作成した複数のサイズを選択し、zipファイルにまとめてダウンロードすることも可能です。
では、最後に作成したファビコン(favicon)を新規タブやGoogleの検索結果画面に表示させるまでの設置方法を解説したいと思います。ファビコン(favicon)画像を作成したら、設置まで丁寧に行ないましょう。
作成したファビコン画像をサーバーにアップロードしましょう。アップロードしたファビコンのURLパスをコピーしておきます。URLパスは、次の工程でhtmlコードに記述する際に必要です。
ファビコン(favicon)画像を作成したら、指定WebページのHTMLファイルのヘッダー部分に記述していきます。なお、ファビコン(favicon)を表示させるブラウザによって、HTMLの記述方法が異なりますので、注意してください。
まず、表示ブラウザが「Chrome・IE11・Firefox・Safari・Opera・Edge」の場合、以下のコードをHTMLのヘッダー部分に記述します。
上記ブラウザでは、ファビコン(favicon)画像の参照元ファイルを「.ico形式」にします。なお、IE11に限っては、PNG形式やGIF形式をファビコン(favicon)画像に用いることもできます。
次に表示ブラウザが「IE9」の場合は、以下のコードをHTMLのヘッダー部分に記述します。
IE11と違って、「type属性」を記述する必要がある点が注意点です。
最後に表示ブラウザが「IE8以下」の場合は、以下のコードをHTMLのヘッダー部分に記述します。
ファビコンを表示させることで検索結果の画面上でサイトページを目立たせることができ、他サイトとの差別化を図ることができます。ユーザーの目を引くためにも有効な手段となります。
ファビコンの設置・未設置によって検索エンジンに影響を与えることはありません。ただし、ブラウザや検索結果、お気に入りバーでの視認性が上がるため、設置がおすすめです。SEOによる集客効果を見込むには全体的な施策が必要です。ファビコン以外のSEO対策は当社のSEOコンサルティングサービスをご覧ください。
ファビコンは絶対必要というわけではありませんが、会社のイメージを定着させたりユーザーからの信頼を得られるメリットがあるので、設置することをおすすめします。
ファビコンを変更することは可能です。他社との差別化を図るためにもオリジナルのアイコンを設定すると良いでしょう。
ファビコンを設定しているのに表示されない場合は、キャッシュが残っていたり画像URLが間違っているなどの原因があります。一度設定を見直してみましょう。
成果の最大化を目指すWebサイト制作
Webサイト制作に関して以下のお悩みを持ったことはありませんか?
「Webサイト経由のお問い合わせ数を増やしたい・・・」
「SEOに強いWebサイト制作会社を探してる・・・」
以前、私がWebサイト制作を外注する時に「成果を最大化するアドバイスがもらえるのか」「SEO要件を満たした会社なのか」こうした会社を見つけることが出来ませんでした。
当社はWebサイト制作はもちろんのこと、「Webマーケティングによる収益の最大化」を目指す会社です。なぜなら、SEOに強くCV数を最大化を図るWebサイト制作を相談することができるからです。また、経験豊富な専任コンサルタントが社内のSEOコンサルタントや制作チームと連携してWebマーケティングの収益最大化を目指すことができます。
当社の強みは以下にあります。
当社にWebサイト制作をお任せ頂いたお客様で様々な成果事例が報告されています。
当社は「SEO×クリエイティブ」のちからで課題を解決できるWebサイト制作の代行会社です。当社の「Webサイト制作サービス」をご確認ください。
ファビコン(favicon)画像は、かつてはブラウザで新規タブを開いたときにタブに表示される画像・ブックマークした際に表示される画像という印象でしたが、2019年5月のGoogleの仕様変更によって、検索結果画面にも目立って表示されるようになりました。
Webページ・サイトを公開したら、ファビコン(favicon)を設定するのは、いまやWebの基本的なお作法です。ユーザーの目をひく可視性の高いファビコン(favicon)を設定することで、SEO効果への寄与も期待できますので、ぜひ設定してください。
internet archiveというサイトをご存知ですか?これは、時系列で過去のサイトの状態を見ることができる便利なサイトです。 普段何気…
ホームページやブログを運営するにあたり、自社の目的に合ったレンタルサーバーの選び方がわからずお悩みではないでしょうか?選択肢がたくさんありす…
さまざまなビジネスでオンライン化が加速していく中、物販を行っている方もインターンネット上での販売を併用するのが必須となってきています。また、…
今回は、ECサイトの運営を行っている方向けに売上アップのポイントについてご紹介します。 ある程度閲覧数は増えているのに、売上に結びつかない……
当社では毎年20件以上の、ホームページリニューアルのご相談をいただきます。 コーポレート・採用・ECなど規模も種類もさまざまですが、リニュー…
新しく企業のサイトを作ることになったけど、何からどうやって進めれば良いかわからない。どういうサイトを作ればお問い合わせを増やせるだろうか・・…
あなたのサイトは、集客できていますか?各々の課題に沿ったSEOとユーザーに響くデザインを両立したサイト制作で、意識の高いターゲットをフロントへ呼び込みます。
Webマーケティングに関わる施策全般をワンストップで
ご提供します。
お気軽にご相談ください。
Webマーケティング最新ニュースのレポートや無料セミナーの先行案内が届く、お得なメルマガ配信中!