WordPress ファビコンの設定方法や表示されない時の確認ポイント
wpinori3745
この記事を読むと分かること！
- ファビコンを作成する時に便利なデザインサイトと注意点
- ファビコンに作成する時に利用できるフリー素材サイトと注意点
- ファビコンを作成する時の注意点
- WordPressでファビコンを設定する手順
- ファビコンが検索結果に表示されない時に確認する５つのポイント
WordPressで作成したWebサイトに「ファビコンを設定したいけどどうしたらいいの？」
「Googleの検索結果にファビコンが表示されない」
この記事を見ていただいてるということは 現在、こういった悩みを抱えていませんか？
ファビコンはWebサイトのシンボルマークですし、設定方法も簡単ですので、ぜひ設定してください。
また、ファビコンを設定したけど検索結果に表示されないという方は、対処方法をご紹介しますので、参考にしてください。
ファビコンはサイトの象徴となるデザインにして、Googleのガイドラインに注意して作成しましょう。
WordPressにファビコンを設定するメリット
視覚的認識の向上
ファビコンは、タブやブックマークバーに表示されるため、ユーザーが複数のタブを開いているときに、サイトを素早く識別できるようになります。
ブランドの認知度向上
ファビコンはサイトの「顔」とも言える存在です。ファビコンを使用することで、サイト訪問者にブランドを印象づけることができます。ブランド認知が高まり、信頼感が増す効果があります。
クリックされやすくなる
ファビコンは検索結果に表示されます。ファビコンが設定済みのWebサイトは、設定されていないWebサイトよりも検索結果でクリックされやすい傾向があります。
ファビコンの作成時に役立つデザインサイトと、使用時の注意点
Canva
WordPressサイトで使用するファビコンを自作する際には、誰でも簡単にデザインができる無料ツール『Canva』をお勧めします。
『Canva』は数千種類のロゴテンプレートから好きなデザインを選んで、配色やイラスト素材を変えるだけで、簡単にオリジナルロゴを作成できますので、デザイン初心者の方にもおススメです。
注意
ファビコンに使用できるフリー素材サイトと、使用時の注意点
icooon-mono
シンプルな単一色のアイコン素材ですが、自分の好みの色を指定してダウンロードすることができます。作成可能ファイルはPNG、PNG、SVGです。
注意
icooon-monoの素材を使用したロゴは商用利用可能ですが、商標登録は禁止されています。
詳細はライセンスについてをご確認ください。
icon rainbow
シンプルな単一色のアイコン素材ですが、自分の好みの色を指定してダウンロードすることができます。作成可能ファイルはPNG、PNG、SVGです。
注意
icooon rainbowの素材を使用したロゴは商用利用可能です。商標登録ができる条件についてはライセンスについてをご確認ください。
FLAT ICON DESIGN
フラットアイコン素材です。色を自由に変更することはできませんが、3種類の配色パターンから選ぶことができます。作成可能ファイルはPNG、PNG、SVGです。
注意
FLAT ICON DESIGNの素材を使用したロゴは商用利用可能ですが、商標登録は禁止されています。詳細はライセンスについてをご確認ください。
ファビコンを作成する時の注意点
使用する素材の利用規約を確認する
ファビコンを準備する際、素材サイトのアイコンを使用することをお考えの方はご注意ください。
『商用利用可』とされている素材にも使用可能範囲が定められており、ロゴに使用することを禁止している素材があります。
私がよく利用するillustACにも下記のような記載があり、禁止事項として『ロゴやロゴに近い対象物への使用』が明記されています。素材サイトを利用する際は使用可能範囲を確認し、使用可能な素材を使うよう心掛けてください。
×ロゴやロゴに近い対象物への使用
ACヘルプセンターより引用
→素材の一部でもロゴへの利用は禁止しています。ブランドロゴ、企業ロゴ、ハンドメイド作家のロゴ、配信者ロゴ、サークルチームロゴなど全面的に禁止となります。
ロゴと同様に、シンボルマーク・名称の付いたキャラクターなど、固有デザイン・固有キャラクターとしての使用は禁止しています。
また、ロゴに使用する事は禁止されていなくても、作成したロゴを商標登録することを禁止されている素材もありますので、必ず利用規約を確認するようにしましょう。
ファビコンは正方形でサイズは512px以上
WordPressのファビコン設定画面では「アイコンは正方形で、少なくとも512px×512pxピクセルが必要です。」と記載があります。
WordPressでファビコンを設定する手順
本記事では例としてWordPressテーマLightning（無料版）での設定方法を説明しますが、他のテーマでも管理画面が下記と同じであれば同様の方法で設定できます。
Step1 WordPressの「サイト基本情報」の設定画面を開く
管理画面の①「外観」>②「カスタマイズ」>③「サイト基本情報」の設定画面を開く。
Step2 ファビコン用の画像を読み込む
④「サイトアイコンを選択」をクリックし、ファビコン用の画像を選択する。
⑤「切り抜かない」をクリックする。
Step3 公開する
⑥「公開」をクリックする。
Step4 ファビコンがタブに表示されれば設定完了
WordPressで設定したファビコンがGoogleの検索結果に表示されない時の5つの確認ポイント
WordPressでファビコンを設定したけれどGoogleの検索結果の画面に表示されない・・・、ということがあります。私にも経験があります。この章ではファビコンが検索結果に表示されない時に確認するポイントについてご紹介します。
Point1. WordPressでファビコンを設定後、どれくらい時間が経過した？
私の経験上、ファビコンを設定してから検索画面に反映するまでに、長ければ2週間くらい時間がかかることがありました。
ファビコンの反映には時間がかかり、直ぐには検索結果に表示されませんので、しばらく様子を見てください。
Point2. ファビコンに使用する画像のサイズを確認する
下記のとおり、Googleのファビコンのガイドラインでは「48x48 ピクセルより大きなファビコンを使用することをおすすめします」との記述があります。WordPressでは512px×512px以上のファビコンを設定することで、自動的に2種類のファビコンを設定してくれます。
検証画面で、設定されているファビコンのサイズが、48x48 ピクセルより大きいことを確認してみてください。
ファビコンは正方形（アスペクト比 1:1）で、8x8 ピクセル以上のサイズが必要です。最小サイズは 8x8 ピクセルですが、さまざまな場所で適切に表示されるように、48x48 ピクセルより大きなファビコンを使用することをおすすめします。
Point3. ファビコンのファイル形式を確認する
下記のとおり、ファビコンにはブラウザごとにサポートされているファイル形式があります。画像ファイルとして良く使用されるJPEGやSVGもサポート範囲内ですが、Google ChromeやEdge、Safariを考慮すると、ICO、PNGファイルを使用する方が良いでしょう。
ブログ管理者も以前、JPEGで作成したファビコンが、Googleの検索結果画面に3週間たっても反映されなかったことから、ファイル形式をPNGに変更したところ、2、3日後にはファビコンが検索結果に表示されるようになった経験があります。
画像引用：Wikipedia
Point4. サブディレクトリに作成されたサイトはファビコンの指定ができない
当ブログも実はサブディレクトリに作成されたサイトのため、このブログサイト自体にはファビコンを設定していません。しかし、検索結果にはファビコンが表示されています。これは親サイトのファビコンが検索結果に表示されているためです。
Google 検索でサポートされるファビコンは 1 つのサイトにつき 1 つだけです。サイトはホスト名によって定義されます。たとえば、
https://www.example.com/とhttps://code.example.com/というサイトがある場合、この 2 つは別々のホスト名として、それぞれに 1 つずつファビコンを設定できます。一方、https://www.example.com/sub-siteはサイトのサブディレクトリであるため、設定できるファビコンはhttps://www.example.com/に対する 1 つのみとなり、そのファビコンがメインのサイトとサブディレクトリの両方に適用されます。
サポートされる:https://example.com（ドメインレベルのホームページ）
サポートされる:https://news.example.com（サブドメイン レベルのホームページ）
サポートされない:https://example.com/news（サブディレクトリ レベルのホームページ）
Point5. ファビコンのURLを頻繁に変更していない？
ファビコンが反映されるまでには数日～数週間かかります。その間はファビコンのURLを変更せずに気長に待ちましょう。
ファビコンの URL は固定されている必要があります（URL は頻繁に変更しないでください）。
Point6. ファビコンのデザインは適切？
ファビコンのデザインがGoogleのガイドラインに定められている不適切なデザインになっていないでしょうか？不適切な画像の場合、ファビコンは表示されませんので、適切なデザインに変更しましょう。その際は、サイトのシンボルとなるデザインになるよう再考しましょう。
・ユーザーが検索結果を見た際に一目でサイトを見分けられるように、ファビコンがウェブサイトのブランドを視覚的に表したものとなるようにしてください。
・わいせつな表現やヘイト表現に関連するシンボル（例: かぎ十字章）などの不適切なファビコンは表示されません。該当する表現がファビコン内で見つかった場合は、デフォルトのアイコンに置き換えられます。
まとめ
WordPressではコードを書かずに管理画面から簡単にファビコンの設定が可能です。サイトのシンボルですので必ずファビコンを設定するようにしましょう。
ファビコンを作成する際、素材サイトの素材を使用場合は、利用規約を確認してから使用すること、Googleのガイドラインに従うように心がけましょう。
検索結果画面にファビコンが表示されない原因として、Googleのガイドラインに従っていない場合があります。確認ポイントをご確認いただき、変更できる点については変更してみてください。
