ファビコン（サイトアイコン）はサイトの『看板』
は、ブラウザのタブやブックマークリストに表示される小さなアイコン。
正式名称は『』と言います。サイトの印象付けやブックマークでの視認性を向上させる効果があります。
ファビコン自体はSEO対策に直接的な影響は与えないと考えられますが、ユーザーにとって『』には欠かせない要素。
例えば自身のサイトが検索結果の下位にあったとしても、ファビコンがあれば馴染みの読者からは見つけやすくなります。そのため、間接的に上位表示の一助となる可能性もあると言えるでしょう。
ファビコンを設定すると、サイトタブやブックマークにはすぐに表示されます。しかし最も重要となる検索結果には中々表示されない場合があり、お困りの方もいるのではないでしょうか。
そこで今回は、ワードプレスを例に『』場合の対処方法について解説します。
※ファビコン作成・画像編集・動画編集など全部入りで53%OFF！プロが使うツール『Adobe CC』を格安購入なら以下の記事をご参照ください。
初心者の方がイラスト・画像デザイン・動画編集を始める際にお勧めしたいツール『Adobe CC』と、その理由・使用できる場面についてを解説する記事です。
※ファビコン作成の無料ツールはこれが最強!?『Inkscape』の使用方法については、以下のリンクをご確認ください。
ファビコンはサイトの顔であり、看板 ブラウザのタブやブックマーク・検索結果などに表示される小さなアイコン、それがファビコン。一見目立たない存在に見えますが、サイトの顔であり看板としての重要な役割を担っています。 近年 …
※SEO対策の専門企業が開発したWordPressテーマ『賢威』。筆者が15年使い続けた理由を、以下の記事にて解説しています。
WordPressテーマ『賢威』について、使用するメリット・デメリットについて解説した記事です。個人的見解ではありますが、テーマ導入の参考になれば幸いです。
ファビコンが検索結果に非表示な理由
ファビコンが表示されない理由として、主に以下の3つが挙げられると思います。
- ●
- ●
- ● （筆者個人の見解）
最初の2つに関しては、すでに対策なさっている方も多いかと思います。まずは先に２つの原因と対策方法を出来るだけ簡素に解説します。
ブラウザに古いキャッシュが残っている
ブラウザはサイトの表示速度を速めるため、一度表示したサイト情報を自動的に保存しています。次回、同じサイトにアクセスの際は保存済みの情報を優先して表示。
新しく加わった情報だけを書き換える事で表示スピードを上げる仕組みです。 しかし『新しく置き換わった情報』が挿入される際、一部書き換わらない場合があります。
『』『』など些細な変更の際、古いファイルを表示してしまう場合があります。
また、これらの症状に対して『』をクリックしても変化がない事も。
古い情報が表示されている場合、通常は以下の方法で解決できます。
- ●
- キーまたはを同時に押すことで、キャッシュを無視してページを再読み込みします。
- ● （Google Chromeを使用）
- ブラウザの右上のメニューから『』を選択してサイトを表示。ではため、常に最新の情報が表示されます。
MEMO※シークレットウィンドウの開き方（Google Chromeを使用）
● ブラウザ右上の縦3点リーダー『』をクリック。サブメニューより『』を選択して下さい。
● 黒いブラウザ『』が開きます。このブラウザではやが保存されませんので、常に更新されたページが表示されます（サイトによっては表示が遅くなる場合があります）。
シークレットウィンドウで自身のサイトを表示させ、ファビコンの表示確認を行って下さい。
- ●
- ブラウザの設定画面からキャッシュをクリアすることで、保存されているすべての情報を削除できます。
この方法の場合、閲覧中のサイトだけではなくやなども削除される場合も。クリア前に設定画面を確認し、残したい項目のチェックを外して実行して下さい。
- ●
- ブラウザを再起動することで、キャッシュがリセットされます。
- ●
- ブラウザ拡張機能が原因で、古い情報が表示される場合もあります。すべての拡張機能を無効化し、問題が解決するかどうか確認してください。
『』に関しては、あくまで自身のブラウザ上での解決方法。
他のPCやスマホで閲覧した場合でもファビコンが表示されない場合は、また別の問題があると思われます。キャッシュをクリアしても問題が解決できない場合、以下の対策も試して下さい。
ファビコンサイズの見直し
ファビコンのサイズ設定は、検索結果への表示に影響します。正しく設定されていない場合、検索結果に表示されない可能性も。
また、ファビコンはの『』または『』に合わせる必要があります。
『20×30px』のような縦横比が異なる画像はGoogleが検知できず、検索結果に表示されない可能性も。
ファイル形式は主に『.png』『.ico』『.svg』『.jpg』『.gif』等が推奨されています。
●
通常、ファビコンは表示する場所（PCブラウザのタブ、ブックマーク、検索結果など）によって異なるサイズの設定が必要。
ただしワードプレスでは『』のPNG画像を一つ設定すると、表示場所に合わせた最適なサイズへ自動的にリサイズしてくれます。
ここまでの2つの確認・操作でファビコン設定の見直しは概ね完了です。
ただ筆者の場合、この操作だけでは解決に至らない事も。そこで、今度はファイル形式とファビコンの設置方法を見直す事にしました。
ファビコンのファイル形式を『.png』から『.ico』へ変更
これからが今回のメイントピックとなる3番目のの改善方法です。あくまで筆者個人の方法と結果ではありますが、興味がありましたらご一読ください。
筆者は以前、ファビコンを作成する際ファイル形式を『』で作成していました。
当時は割と『.ico』で作成するのが常識。『.ico』ファイルはワードプレスへのアップロードができない仕様なので、サーバーへ直接アップロードしていました。当時はアップロードから数日で『Yahoo!検索』の検索結果に表示されていた記憶があります。
最近は『』形式にてワードプレスの管理画面よりアップロードしていました。
簡単に設定できるので、便利に利用していましたが…検索結果にはファビコンが表示されません。ブラウザのタブ・ブックマークリストには瞬時に表示されるのですが、肝心の検索結果には中々表示されず。
私が運営していたワードプレスサイトの運営状況は以下の通りです。
- ●
- ●
- ●
- ●
- ● （Google / Yahoo!両方）
ここで、ファビコンのファイル形式に問題がある可能性を疑いました。
テストを兼ね、1サイトのファビコンを『』から『』に変更、。
…すると、4～5日後には検索結果にファビコンが表示されました。
無事にファビコンが表示されたのは、単にタイミング的な事かも知れません。ですが検索結果に中々ファビコンが表示されない方は、一度試してみる価値はあるのでは？と思います。
ここで『.ico』形式でのファビコン作成に興味を持たれた方へ、具体的な作成方法とアップロード・設定方法を解説します。
ワードプレスへアップロード・設定する方法とは若干異なりますのでご注意下さい。
『.ico』ファイルを作成する
無料のファビコン生成サイトは『マルチアイコンの作成(Convert Multi-Icon)』サイトを利用させて頂いております（『マルチアイコンの作成』運営者様、素晴らしいサービスのご提供に感謝致します）。
マルチアイコンの作成手順は以下の通り。
まずは『』に変換する画像ファイルを準備します。形式は『GIF』『PNG』『JPEG』『TIFF』『BMP』、ファイル形式は『512×512px』を推奨します。
※『512×512px』は、WordPressの推奨値。プラットフォームが異なる場合は、本記事の最下段に記載したGoogleの推奨値に合わせた方が良いと思います。
サイトにアクセスして『ファイルを選択』をクリック ⇒ PCよりファイルを選択
ページ内にアップロードした画像とサイズが表示されます（現在表示されているアップロード画像は、当サイトファビコンの旧バージョンです）。
次に、ページ上部のサイズ指定部で『』を選択。この設定で、一つの画像で全てのサイズに対応する『』が作成されます。
全てのサイズ横にチェックが入っている事が確認できたら、下部『』をクリックします。
ファビコンが完成したら、ダウンロードします。
● ダウンロードしたファイル名を『』に変更
ファイル名を『』に変更して下さい。また、ワードプレス上で既にファビコンを設定している場合は予め削除して下さい。
続いて、アップロードの準備に移ります。
ワードプレスに『favicon.ico』ファイルを設定する準備
MEMO
※HTMLやCSSを含めPHPファイルの変更を行う際は、事前にバックアップを行って下さい。特にPHPファイルは、操作を誤ると修復が困難になる恐れがありますのでご注意下さい。
バックアップの方法については、以下のリンクよりご確認下さい。
ワードプレスの保守管理は基本的に自分で行う WordPressは、ブログやWebサイトを簡単に作成・運用できるCMS（コンテンツ管理システム）です。しかし一方でセキュリティの脆弱性高いシステムとも言われ、サーバー障害な …
ワードプレスは、セキュリティの観点から『』形式のファイルをアップロード出来ない仕様になっています（使用するテーマによる）。
サーバーへ直接アップロードする事になりますが、それだけでは反映されません。
まず自身のワードプレス管理画面『』⇒『』より『』を開いて下さい。
『』の『<head>～</head>』内へ以下のコードを追加します。追加場所に迷ったら、『</head>』の直前に追加して下さい。
<link rel=”icon” href=”/favicon.ico”>
※すでに『favicon.ico』に関するコードがある場合は追加しないで下さい。
最後にページ最下部の『』をクリックで『』のアップロード準備はOKです。
『favicon.ico』をサーバーへアップロードする
次に『』をサーバーへアップロード。今回はFTPツール『』を使用します。
※Filezillaの導入・初期設定の方法については、以下のリンクよりご確認ください。
WordPress 定番のFTPツール『Filezilla』の導入と設定 今回は、ワードプレスのバックアップファイルをアップロードする方法を解説。無料FTPツールの定番『Filezilla（ファイルジラ）』を使用します …
『』は『/public_html』配下にアップロードします。
無事にアップロードが完了したら、サイトを表示してサイトタブにファビコンが表示されているのをご確認ください（検索結果に反映されるまでは時間が掛かります）。
ファビコンの設定が完了したら、しばらく様子をみよう
これらの対策を施したら、サーチコンソールよりインデックス申請を行い7～10日間ほど放置して様子を見ます。しばらく経過しても検索結果にファビコンが表示されない場合、他に原因があるかも知れません。
補足ですが、本サイト『ウェブサイト運営のネタ帳』はサイト立ち上げ時から『.ico』ファイルで運営。
結果トップページはインデックスと同時にファビコンが表示され、記事ページもインデックスから5日後には表示されています。
通常のワードプレスからの設置と異なり、ファイル階層の浅い『/public_html』に配置する事でクローラーに認知されやすくなった可能性もあります。
『.ico』形式のサイトアイコンは、元々IE（インターネットエクスプローラー）向けのファイル形式。『Google Chrome』や『Edge』などでは他のファイル形式でも問題無く表示してくれるはずなんですが。
なお、これらの対策を行っても検索結果での早期表示が約束されるものではありません。あくまで個人の経験上の話ですのでご了承下さい。
また、googleはファビコン設置のガイドラインとして、以下の項目を挙げています。
Google 検索の検索結果にファビコンが表示されるようにするには、次のガイドラインを遵守する必要があります。
・Googlebot-Image がファビコン ファイルをクロールできることと、Googlebot がホームページをクロールできることが必要です（クロールをブロックしないでください）。
・ユーザーが検索結果を見た際に一目でサイトを見分けられるように、ファビコンがウェブサイトのブランドを視覚的に表したものとなるようにしてください。
・ファビコンのサイズは 48 x 48 ピクセルの倍数にしてください（48 x 48 ピクセル、96 x 96 ピクセル、144 x 144 ピクセルなど）。SVG ファイルの場合は、サイズに関して特別な指定はありません。有効なファビコン形式であれば、すべてサポートされます。
・ファビコンの URL は固定されている必要があります（URL は頻繁に変更しないでください）。
・わいせつな表現やヘイト表現に関連するシンボル（例: かぎ十字章）などの不適切なファビコンは表示されません。該当する表現がファビコン内で見つかった場合は、デフォルトのアイコンに置き換えられます。
引用元：googleセントラル『検索結果に表示されるファビコンを定義する』
上記のガイドラインの内、ファビコンのサイズについてワードプレスについては公式サイトにて『』を推奨しているので問題は無いかと思います。
この他の注意点に関してはGoogleガイドラインに沿ってファビコンを作成・設置する事をお薦めします。
