SEO対策なら株式会社ペコプラ > Webサイト制作 > サイト制作 > ファビコン（favicon）の設定方法！作り方・サイズ・表示されない時の対処法

ファビコン（favicon）の設定方法！作り方・サイズ・表示されない時の対処法

Webサイト制作

サイト制作

2024.10.25

2019年5月からモバイル検索へ導入されたファビコン。2020年1月中旬に開始したPC検索結果へのテスト表示が約2週間で終了し、今現在はPC検索結果の画面のファビコンは表示されていません。そこで本記事では、ファビコンの設定方法から表示されない時の対処法までをまとめてみました。

1 ファビコン（favicon）ってなに？
2 ファビコンの表示例
3 ファビコンの必要性
4 ファビコンの設定方法
5 ファビコンが表示されない原因と対処法
6 ファビコンの無料作成ツール！おすすめ3選
7 Googleによるファビコン表示の経緯！時系列で解説
- 7.1 2020年1月中旬：PC検索結果でファビコンのテスト表示を開始
- 7.2 2020年1月下旬：ファビコンなしのPC検索結果へ逆戻り
8 まとめ

ファビコン（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の想定内！事前に用意されていた自動検出システムによって検知されているうえ、実際の乱用事例が検索結果のフィードバックからも届いているとアナウンスされています。

https://twitter.com/dannysullivan/status/1133092159467339776?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1133092159467339776%7Ctwgr%5Eshare_3&ref_url=https%3A%2F%2Fpecopla.net%2F%3Fp%3D18230

ここで問題となるのが、ファビコンスパムに課せられるペナルティの程度です。

Googleのダニー・サリバン氏（Danny Sullivan）はツイートで、スパムと判断した場合は独自ファビコンが表示されなくなり、代わりに他のWebサイトと区別できないデフォルトの地球儀マークが表示されるため、できるだけ早く修正すべきだと警告しています。

https://twitter.com/dannysullivan/status/1133034130235486209?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1133034130235486209%7Ctwgr%5Eshare_3&ref_url=https%3A%2F%2Fpecopla.net%2F%3Fp%3D18230

https://twitter.com/dannysullivan/status/1133034538093780992?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1133034538093780992%7Ctwgr%5Eshare_3&ref_url=https%3A%2F%2Fpecopla.net%2F%3Fp%3D18230

設定方法や手順が間違っていないのにファビコンが表示されない時は、ガイドラインに違反していないか見直してみましょう。

ブラウザに大量のキャッシュが残っている

ブラウザ内にファビコンを設定する前の古いキャッシュが大量に残っている場合も、非表示になる代表的な原因です。

キャッシュとは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検索での表示を試しているという状態」とアナウンスしています。

Last year, our search results on mobile gained a new look. That’s now rolling out to desktop results this week, presenting site domain names and brand icons prominently, along with a bolded “Ad” label for ads. Here’s a mockup: pic.twitter.com/aM9UAbSKtv

— Google SearchLiaison (@searchliaison) January 13, 2020

普段（2020年1月中旬時点）はどこに表示されているかと言うと、ブラウザでWebサイトを見ているとタブに表示されているアイコンのことになります。

弊社の場合、背景色が水色で白抜き文字で「ペ」と書かれたファビコンが表示されているのが見えるかと思います。

2020年1月下旬：ファビコンなしのPC検索結果へ逆戻り

結論から言うと、PC検索結果におけるファビコンのテスト表示はわずか2週間ほどで終了し、元の状態へ戻ってしまいました。

下記の通り、Google SearchLiaisonのアカウントから公式にアナウンスされています。

Here’s our full statement on why we’re going to experiment further. Our early tests of the design for desktop were positive. But we appreciate the feedback, the trust people place in Google, and we’re dedicating to improving the experience. pic.twitter.com/gy9PwcLqHj

— Google SearchLiaison (@searchliaison) January 24, 2020