ファビコン（favicon）の設定方法！作り方・サイズ・表示されない時の対処法
2020.06.15
2019年5月からモバイル検索へ導入されたファビコン。2020年1月中旬に開始したPC検索結果へのテスト表示が約2週間で終了し、今現在はPC検索結果の画面のファビコンは表示されていません。そこで本記事では、ファビコンの設定方法から表示されない時の対処法までをまとめてみました。
ファビコン（favicon）ってなに？
まずファビコンとは何か、という点から説明します。
ファビコンという名称は略称となっておりまして、正式には「favorite icon（フェイバリット・アイコン）」となり、それを略してfavicon（ファビコン）と呼ばれています。元々はwebサイトをお気に入りに登録した際に出てくるアイコン、という意味で、現在ではそれを略してファビコンという名前で呼んでいるというわけです。
ファビコンの表示例
設定されていないサイトもありますが、現在ではほとんどのサイトがファビコンを設定しており、Googleが2019年5月からモバイル検索に表示させています。
ブラウザで大量のタブを開く人は、ほとんどファビコンしか見えない状態かと思いますので、ないと困る存在とも言えます。ファビコンを普段から注意して見ているという人は少ないと思いますが、ファビコンのおかげでユーザーは「このマークはこのサイト」という認識を無意識のうちに行っているのです。
また、ファビコンはブックマークの際にも表示されます。ブックマーク欄をよく確認すると、ブックマークの左端の部分にサイトごとのファビコンが表示されています。ブックマークの内容を把握するために、無意識にファビコンを見てサイトの中身を見分けている、という方もいらっしゃるのではないでしょうか。
ファビコンの必要性
ファビコンですが、Webサイトを運営するにあたり設定しなくても問題なくWebサイトは公開できますし、ファビコンがあるサイトの方が検索結果で上位にくるということもないので、そういう意味では設定する必要はないのですが、ファビコンは大抵の場合、その企業のロゴマークなどが設定されていることが多く、ファビコンでそのページの信頼度を無意識下で判定しているという部分もあるため、設定しておくことでユーザーの利便性向上につながります。
また、ファビコンにはもう一つ、サイトのブランディングという効果があることも忘れてはいけません。このサイトはこんな情報を取り扱っているんだな、ということが一目でわかるファビコンや、社名やサイト名がわかりやすいファビコンは、検索でサイトを見つけた人に第一印象でわかりやすさを伝えるという目的を持っています。そのサイトの専門分野がある場合、ファビコンで情報の信ぴょう性を測るユーザーもいるので、ファビコンはそういったユーザーをサイトに誘導してくれるという役割も持っています。
例えば、SEOに関する情報を探しているときにそのページのファビコンがGoogleのものだと情報の信憑性が高いとユーザーは判断しやすくなるため、なるべく設定しておくことをお勧め致します。
また、ファビコンは人の視覚に訴えるシンボルのような存在です。そのため、できるだけシンプルで、見た目にもインパクトのあるデザインのものにすることが大切です。
私たちはファビコンを普段から集中的に見ている、というわけではありません。しかし、webページを閲覧した際や、そのページをブックマークに入れた際に、特徴的な画像をファビコンに設定しておくことで、間接的にページビューの増加に良い影響を与えることがあります。
ファビコンの設定方法
それでは、実際にファビコンを設定する方法について説明していきます。
ファビコンにしたい画像を用意
まず、最初にファビコンにしたい画像を用意します。企業サイトであれば、企業のロゴマークなどを用意することがほとんどです。
個人のブログなどであれば、ブログのロゴマークなど設定していると思うので、そちらを使うといいと思います。
なるべくファビコンのデザインはシンプルに、なおかつサイトの特徴を表しているデザインのものを選ぶと良いでしょう。サイトのテーマに関連するアイテムや、会社のロゴマークを使う場合は、一目見てぱっとわかるような簡潔な画像かどうかをチェックしてから使うのがおすすめです。
また、サイズは大きなものを設定するか、いくつかの種類のものをまとめてアップロードしておくのがおすすめです。
詳しくは後述しますが、ブラウザの種類やスマホからのアクセスによって、ファビコンの表示される大きさが変わってくることがあります。どのようなサイズで表示されたとしても、ファビコンがきれいに見えるようあらかじめ大きいサイズのものをアップロードしておくか、.icoという拡張子で大きさがちがうものを複数アップロードしておくと、環境が変わったときにファビコンが崩れて見える、という事態を防ぐことができます。
拡張子「ico」で保存
ファビコンはjpgやpngなど一般的な画像形式でも表示されますが、一部ブラウザではjpgだと表示されないなどあるため、ファビコンに関しては「ico」という拡張子で保存することが一般的となっています。
なぜかというと、ファビコンは一般的に「16px × 16px」という形状で表示されることが多いですが、サイトによって「24px × 24px」であったり、「32px × 32px」であったりと、表示されるサイズにばらつきがあるためです。「.ico」という拡張子で保存すると、複数のサイズの画像を一つにまとめることができます。この拡張子で保存しておくことで、HTMLにファビコンの設定をするときに画像のサイズ指定をするという手間を省くことができます。
また、ファビコンの拡張子は、ファビコン用の画像変換サイトでも作ることができます。pngやgifで作成されたファビコン用のロゴをサイトで変換するだけで、簡単にファビコン用のアイコンを作成することができるので便利です。
・有効なファビコンのファイル形式についてはこちら：https://en.wikipedia.org/wiki/Favicon#File_format_support
ファビコンのサイズ
実際にブラウザタブや検索結果に表示されるサイズは16ピクセル×16ピクセルとなりますが、Googleのガイドラインでは48ピクセルの倍数であることが条件となっておりますため、48×48ピクセルや96×96ピクセルなどで保存する必要があります。
ファビコンは、そのサイトの性質や特徴を表すシンボルマークです。そのため、ファビコンを設定するということは、そのマークを使って自分のサイトをブランディングする、という意味があります。そのため、一目でわかり、見分けがつきやすいマークをファビコンとして設定するのが良いでしょう。
また、先述のGoogleガイドラインの条件を全て満たしていても、ファビコンが必ず表示されるとは限らないようです。ファビコンを設定しても反映されない、という場合は、画像を変更してみたり、上げなおしたりしてクローラーが読み取りやすいようにしてあげましょう。
ページに設定する
ファビコンの画像ファイルですが、一般的にはルートディレクトリに保存されることが多いです。
理由としてはルートディレクトリに「favicon.ico」というファイル名で保存しておくだけで、各種ブラウザはその画像をファビコンとして認識し、ブラウザのタブなどに表示してくれるためです。
ルートディレクトリ以外に保存したい場合は、ソースの中にファビコンファイルの場所を記述する必要があります。
以下はimagesフォルダに保存した場合の記述方法となります。
<link rel="shortcut icon" href="images/favicon.ico">
Googleのガイドラインでも、上記の記述を求めていますので、ルートディレクトリに画像を保存した場合も念の為書いておくことをお勧め致します。
また、サイト構築にワードプレス（バージョン4.3以降）を使用している場合、「サイトアイコン」という機能を使うことで簡単にファビコンを設定することができます。
「管理画面」
「外観」→「カスタマイズ」→「サイト基本情報」
とアクセスすると、「サイトアイコン」と表示されている項目があります。ここに任意の画像をアップロードすることで、簡単にサイトにファビコンを設定することができます。
こちらの方法でファビコンを設定する場合、.ico形式である必要はありません。png形式のファイルを選択してアップロードするだけで大丈夫です。
また、アップロードできるサイズは512px × 512pxです。通常のファビコンと比較するとかなり大きなサイズの画像なので、ファビコンをワードプレスから設定する際は気を付けましょう。
ファビコンの透過処理の仕方
ファビコンをより印象的なデザインに仕上げるには、背景の透過処理に挑戦してみましょう。
透過処理を行うことで通常は白く残ってしまう余白部分が無くなり、洗練された見やすいファビコンが完成します。
▼透過処理のポイント
- 必ずPNG形式で保存する
- 色数の多いPNG-24の方が、PNG-8よりも綺麗に仕上がる
とはいえ、「Photoshopを持っていない」「Windows付属のペイントでは透過処理後に保存できない」と悩んでいる方も多いでしょう。
そんな時は、後述するファビコンの無料作成ツールが便利！簡単に透過処理ができるのはもちろん、複数サイズに対応したマルチアイコンを作りたい時に便利です。
ファビコンが表示されない原因と対処法
ここからは、ファビコンが表示されない代表的な3つの原因をピックアップし、それぞれの対処法について解説します。
ファビコンのガイドラインに違反している
Googleのガイドラインではファビコンのサイズだけでなく、その他の注意点として以下の4点が挙げられています。
・Google がファビコンのファイルとホームページをクロールできること（Google をブロックしないこと）。
・ファビコンがウェブサイトのブランドを視覚的に表したものとなっており、ユーザーが検索結果を見た際に一目でサイトを見分けられるようになっていること。
・ファビコンの URL は固定されている必要があります（URL は頻繁に変更しないでください）。
・わいせつな表現やヘイト表現に関連するシンボル（例: かぎ十字章）などの不適切なファビコンは表示されません。該当する表現がファビコン内で見つかった場合は、デフォルトのアイコンに置き換えられます。
引用：Search Consoleヘルプ ファビコンに関するガイドライン
ファビコン表示が主流になるにつれて、Google関係者や著名人を連想させる悪戯、有名ブランドのロゴを真似た模倣デザインといった「ファビコンの乱用」が多発しているようです。
とはいえ、ファビコンスパムはGoogleの想定内！事前に用意されていた自動検出システムによって検知されているうえ、実際の乱用事例が検索結果のフィードバックからも届いているとアナウンスされています。
ここで問題となるのが、ファビコンスパムに課せられるペナルティの程度です。
Googleのダニー・サリバン氏（Danny Sullivan）はツイートで、スパムと判断した場合は独自ファビコンが表示されなくなり、代わりに他のWebサイトと区別できないデフォルトの地球儀マークが表示されるため、できるだけ早く修正すべきだと警告しています。
設定方法や手順が間違っていないのにファビコンが表示されない時は、ガイドラインに違反していないか見直してみましょう。
ブラウザに大量のキャッシュが残っている
ブラウザ内にファビコンを設定する前の古いキャッシュが大量に残っている場合も、非表示になる代表的な原因です。
キャッシュとはWebサイトの表示速度を速めるために、過去のアクセス履歴をブラウザに保存しておく機能を指しています。
例えばGoogle Chromeのキャッシュを削除する場合、右上の「三本点のアイコン」→「その他のツール」→「閲覧履歴を削除」へ進み、下記の5項目を選択またはチェックマークを入れてから「閲覧履歴データを消去する」をクリックするだけで完了です。
▼Google Chromeの設定項目
- 次の期間のアイテムを消去：「すべて」
- 閲覧履歴
- ダウンロード履歴
- Cookieと他のサイトのデータ
- キャッシュされた画像とファイル
なお、「もっと手っ取り早く済ませたい！」という方は、下記のショートカットを試してみましょう。
▼キャッシュを削除するショートカット
- Windows：「Shift」+「Ctrl」+「R」
- macOS：「Shift」+「Command」+「R」
キャッシュを削除したらブラウザを再起動させ、ファビコンが表示されるか確認してください。
ディレクトリ内の古いFaviconsファイルが残っている
「ファビコンのデザインを更新したら表示されなくなった！」という場合は、ディレクトリ内に旧ファビコンに関するファイルが残っている可能性があります。
下記の順序に従って格納場所へ辿り着いたら古いファビコン関連のファイルを削除し、ブラウザを再起動してみましょう。
▼Windowsの格納場所
- Local Settings
- Application Data
- Google
- Chrome
- User Data
- Default
▼Macの格納場所
- Machintosh HD
- Users
- ユーザー名
- Library
- Local
- Application Support
- Google
- Chrome
- Default
ファビコンの無料作成ツール！おすすめ3選
「イチからファビコンを作るのは面倒！」という方には、便利な作成ツールがおすすめです。この段落では、初心者でも簡単にファビコンが作れる無料の作成ツールをご紹介します。
favicon.cc
出典：favicon.cc
会員登録もソフトのダウンロードも必要ない無料ツール。Webサイト上でファビコン作成が完結するので、「今すぐ手軽に使いたい！」という方に向いています。ただし、サイズは最小の「16×16」のみ。さまざまなサイズで書き出したい方には不向きかもしれません。
Faviconジェネレーター
出典：Faviconジェネレーター
複数のサイズを網羅した「マルチアイコン」を作成したい時におすすめの無料ルーツ。たった1つの画像をアップロードするだけで、指定した全てのサイズで書き出してくれます。pngの透過に対応しているのも強みです。
iconifier.net
出典：iconifier.net
headerタグに記述するべき内容まで表示してくれる便利ツール。もちろん、基本画像を1つアップするだけでマルチアイコンが作れるうえ、pngの透過にも対応しています。
Googleによるファビコン表示の経緯！時系列で解説
Googleは、2019年5月に初めてモバイル検索結果へファビコン表示を導入して以降、対象デバイスの拡張へ向けて様々なテストを実施してきました。
下記の通りこれまでの経緯を時系列で見てみると、Googleがファビコン表示について模索している様子が伺えます。
▼ファビコン表示の経緯
- 2019年5月：モバイル検索への導入をスタート
- 2020年1月まで：一部のユーザーに対し、PC検索結果へのテスト表示を実施
- 2020年1月中旬：全ユーザーを対象に、PC検索結果でのテスト表示をスタート
- 2020年1月下旬：PC検索結果でのテスト表示を終了
ここからは、特にSEOコミュニティで話題性の高かったPC検索結果に対するファビコン表示について見てみましょう。
2020年1月中旬：PC検索結果でファビコンのテスト表示を開始
Googleは一時的ではあるものの、2020年1月中旬から全ユーザーを対象にPC検索結果でのファビコン表示をスタートさせました。
Google SearchLiaison公式アカウントのツイートによると、「まだテスト段階ではありますが、今PC検索での表示を試しているという状態」とアナウンスしています。
普段（2020年1月中旬時点）はどこに表示されているかと言うと、ブラウザでWebサイトを見ているとタブに表示されているアイコンのことになります。
弊社の場合、背景色が水色で白抜き文字で「ペ」と書かれたファビコンが表示されているのが見えるかと思います。
2020年1月下旬：ファビコンなしのPC検索結果へ逆戻り
結論から言うと、PC検索結果におけるファビコンのテスト表示はわずか2週間ほどで終了し、元の状態へ戻ってしまいました。
下記の通り、Google SearchLiaisonのアカウントから公式にアナウンスされています。
▼公式アナウンスのポイント
- GoogleはPC 検索におけるユーザー体験の改善に注力してきた
- 先週導入したファビコン表示は、PC 検索におけるUX向上の一環だった
- モバイル検索と同様に、PC 検索の初期テストはポジティブだった
- 常に、ユーザーからのフィードバックを取り入れている
- 現状ではPC検索のファビコンへの変更を試している段階
- 今後、さらに時間をかけてデザインの調整を繰り返していく予定
つまり、ユーザーから好意的なフィードバックが得られたと主張しつつ、1ヵ月も経たずにファビコンを消して元のデザインへ戻しているのです。
推察するに、同じファビコン表示でもPC検索結果ではモバイル検索よりもネカティブなフィードバックが多かった、もしくは表示する場所を変更するなど改良の余地があると判断したのかもしれません。
ちなみに、モバイル検索に対してはユーザーからポジティブなフィードバックが寄せられていたと解説しています。
▼モバイル検索のファビコンに対するフィードバック
- 情報提供サイトがユーザーに伝わりやすい
- 検索結果ページにおける視覚的なブランド認知が向上する
まとめ
今回は、Googleが積極的に検索結果に採用を開始しているファビコンについて説明させていただきました。
Googleのガイドラインでもありますが、ファビコンは「ブランドを視覚的に表したもの」ですので、ユーザーにファビコンを見ただけでどこのサイトかわかっていただけるように、わかりやすく小さい画像でも視認しやすいデザインを選択してください。
また、そのファビコンを見たらどのサイトかというのをユーザーがすぐに判断できるようになってもらうため、頻繁にデザインを変えることがなくてもいいように最初から長期利用することを想定してデザインを決めましょう。
これからPCの検索結果にも常時出てくる可能性がございますので、まだ設定されていないというWeb担当者の方は、この機会に是非設定してみてください。
関連
Webサイト制作
Webサイト制作
SEO外部対策SEO対策
