初心者向け ファビコンの設定方法!WordPressなら簡単設定!設定すべき理由やサイズは?

あなたのサイトにはファビコン(favicon)は設定されていますか?ファビコンは、お気に入り(favorite)に登録したときに表示されるアイコン(icon)という意味で、favorite icon(フェイバリット・アイコン)が縮約して、favicon(ファビコン)と呼ぶようになったのが名前の由来だそうです。

ファビコンの設定方法はいくつかありますが、今回はWordPress初心者さんが簡単に設定できる初心者向けファビコンの設定方法をわかりやすくお伝えします。他の方法で設定するときと推奨のサイズも異なります。サイズについても確認しておきましょう。

ファビコンとは?設定しておいた方がいい理由2点?

サイトのブランディングのため

favicon(ファビコン)は「Favorite icon(お気に入りのアイコン)」という言葉を省略したもので、運営者がWebページに設置するシンボルマークのことです。主に、アドレスバーやブラウザのタブ、スマートフォンでWebページを"ホーム画面"に置いた際に表示されるアイコンなどを指します。

ファビコンはWebサイトのシンボルマークとなり、ブランディングにも効果的です。自分のサイトのブランディングにもなるファビコン、まだの方はこの機会に設定しておきましょう。

Google 検索でサイトの検索結果に含めることができるため

Google検索のデスクトップでの結果表示のデザインが、1月23日ごろから変わりました。昨年5月にモバイル版で行われたデザイン変更が、デスクトップにも反映されたかたちです。

広告は、黒太字で「広告」と表示されるようになりました。

検索結果については、URLが、タイトルの上に移動して黒になり、URLの前にファビコン(ブラウザのタブなどに表示されるWebサイトのロゴ)が付くようになりました。つまり

「ファビコン+サイトのURL+タイトル+その下に説明文(概要文)」という順で表示されるようになりました。

Googleサポートにおいても「検索結果に表示されるファビコンを定義する」というページがあり、サイトにファビコンが設定されている場合、Google 検索でサイトの検索結果に含めることができるとしています。この場合は、以下のガイドラインに沿ったものにしなければなりません。

ガイドライン
検索結果の横にファビコンを表示するには、次のガイドラインに準拠する必要があります。なお、すべてのガイドラインが満たされても、ファビコンが検索結果に表示されるかは保証されません。

Google がファビコンのファイルとホームページをクロールできること(Google をブロックしないこと)。
ファビコンがウェブサイトのブランドを視覚的に表したものとなっており、ユーザーが検索結果を見た際に一目でサイトを見分けられるようになっていること。
ファビコンのサイズが 48 ピクセルの倍数になっていること(例: 48 x 48 ピクセル、96 x 96 ピクセル、144 x 144 ピクセルなど)。SVG ファイルの場合は、サイズに関して特別な指定はありません。有効なファビコン形式は、すべてサポートされています。Google では画像サイズを 16 x 16 ピクセルに変換するため、その解像度で適切に表示されるか、あらかじめご確認ください。16 × 16 ピクセルのファビコンは指定しないでください。
ファビコンの URL は固定されている必要があります(URL は頻繁に変更しないでください)。
わいせつな表現やヘイト表現に関連するシンボル(例: かぎ十字章)などの不適切なファビコンは表示されません。該当する表現がファビコン内で見つかった場合は、デフォルトのアイコンに置き換えられます。

引用:https://support.google.com/webmasters/answer/9290858?hl=ja

ユーザーは、このアイコンでソースが信頼できるものかどうかを視覚的に判断しやすくなるため、利便性があがり、フェイクニュース対策の一環でもあるようです。

WordPressでファビコンを設定する方法

WordPress4.3以降のバージョンからファビコンの設定がとても簡単になりましたので、ファビコンの画像が用意されていれば、初心者でも5分もかからずに設定できますのでこの機会に設定をしましょう。

事前準備

ファビコンは、Webサイトの内容が伝わるシンボルマークとなるものを作成します。また、小さいアイコンのため、複雑なものや色数の多いものは避け、シンプルでわかりやすいものが好ましいです。

通常、ファビコンは、.icoという特殊な拡張子が使われています。しかし、ワードプレスでは.pngや.jpgなどの通常の画像ファイルを用意しておくだけで簡単にファビコンの設定が可能です。画像の推奨サイズは512×512ピクセルとなっているので、そのサイズに合わせて画像ファイルを作っておきましょう。

WordPressでの設定

まずはWordPressの管理画面にログインし、左メニューの「外観」内にある「カスタマイズ」をクリックしましょう。

 

ここからさらに、「サイト基本情報」へと進みます。

「サイトアイコン」と記載されている下に「画像を選択」というボタンがありますので、クリックをしましょう。

既にアップロードされている画像の中から選択するか、新たに画像をアップロードしましょう。サイトアイコンは512x512ピクセル以上の正方形を準備します。.pngや.jpgなどの通常の画像ファイルで大丈夫です。

設定が終わったら自分のサイトを確認してみましょう。もしファビコンが表示されない場合は、ブラウザのキャッシュをクリアしてみてください。または、別のブラウザやパソコン、プライベートブラウザで確認してみてください。

他にも、phpファイルに直接記述する方法もあります。また、お使いのテーマによっては、テーマの中にファビコン設定の機能があります。

アフィンガー5の場合

ダッシュボードのAFFINGER5の管理>AFFINGER5の管理とすすみ、

会話・ファビコン設定をクリック

ファビコン画像の項のアップロードから、準備していたアイコンをアップロードします。

ちなみに、このアフィンガーのファビコン設定から設定する場合の画像のサイズは、16✕16px、32✕32Ppxのマルチアイコンが推奨されています。

最後に更新をクリック。設定が終わったら、サイトを確認してみましょう。

まとめ

ファビコンは、Webサイトの内容が伝わるシンボルマークとなるものを作成します。また、小さいアイコンのため、複雑なものや色数の多いものは避け、シンプルでわかりやすいものを作成しましょう。

ファビコン画像を作成してしまえば、Word Pressで簡単に設定できます。テーマなどで設定項目があるテーマもあります。

いずれの場合も、その設定にあった画像サイズと拡張子があります。WordPressの外観>カスタマイズ>サイト基本情報からの設定であれば、.pngや.jpgなどの通常の画像ファイルで大丈夫なので、まだの方は、サクッと作っておきましょう。

今後を考える

ひとつひとつ出来た!が増えると楽しくなってきますね。

また、更にネットで収益化していきたい、
他の人とは一味違うブログ運営がしてみたい、という場合には
以下のメルマガにも登録してみてください。

-WordPress構築

Copyright© Netbusiness Labo , 2020 All Rights Reserved Powered by AFFINGER5.