WordPressのファビコン（サイトアイコン）の簡単作成法

• コピーしました

※当ブログではプロモーション広告を利用しています。

ファビコン（サイトアイコン）の設定方法を教えてください。

という質問にお答えします。

 

2019年の8月から、Googleの検索結果に
ファビコン（favicon）＝サイトアイコンが表示されるようになりました。

 

ファビコンって・・コレです。
↓↓↓

 

上の画像の赤で囲った部分のアイコンの事。

 

これを設定しておくと、
読者にひと目で覚えてもらえたり、記憶にとどめてもらえます。

 

検索結果が有利になるとか
SEO的に効果があるという訳ではないですが、
有ると無いでは印象はかなり違います。

 

ブックマークに入れると、ファビコンが目印になるので、
目に留まりやすく訪問回数も増えそうですよね。

 

このファビコン、
簡単に設置できるので作成方法をお伝えします。

 

 

この記事を読むとわかること

ファビコンの作成方法

ファビコン、眺めているだけで、楽しくなりませんか？

ブックマークバーにこうして並べてみると、
各サイトごとに様々な色やマーク、文字を使って特色を出してますよね。

 

わざわざ文字を読まなくても見た瞬間に
自分の行きたいサイトの目印になります。

 

読者へのアピール度がダントツに上がりますから、
自分のブログ専用のファビコンは作っておいた方がいいです。

 

では、早速作り方から説明して行きましょう！

 

１）素材を準備する

まず、ファビコンに設定する素材を準備しましょう。

 

WordPressでは、
大きさは正方形で512×512ピクセル以上の画像が良い
とされています。

 

Google推奨の数値で行けば48×48の倍数が良い
と書かれているので528×528で作成すれば問題ないという事ですね。

 

パソコン画面の中では表示される時の大きさは、
1cm×1cm以下の小さなものなので、作成する時は大きな画像ですが、
複雑なデザインの画像、文字数の多い画像だと、実際のファビコンとして見た時になんだかわかりません。

 

 

Facebookなら「ｆ」ですし、Yahoo!なら「Y」ですよね？

このぐらいシンプルなデザインが良いという事です。

 

Evernoteなら緑の象のマーク・・みたいな。

 

いくつか候補を用意して、実際に設置してみて、
自分の目で見てみるとさじ加減が分かると思います。

 

ファビコンとして使える素材サイトを紹介します。
お気に入りのファビコンを見つけてくださいね。

ファビコン素材を無料でダウンロードできるサイト

フリーファビコン

 

ロゴマルシェ

 

あとは私がやっているのは、フォトスケープという画像編集ソフト（無料）で
単色のバックに、文字を一文字。

 

うちのmegabolgなら、黒バックに白文字でMを一文字です。
（実はかなり気に入ってます。笑）

 

けっこう、このぐらいシンプルな方が
パッと見て分かりやすくて、覚えてもらいやすいです。

 

といういことで、
フォトスケープはココからダウンロードできます。

 

MAC用はこちらから

 

フォトスケープの使い方は、
各自ググってください。

 

めちゃ簡単なので、直ぐに飲み込めると思います。

 

ファビコンの設定方法

設定方法はめちゃ簡単です。

 

①ワードプレスダッシュボードの「外観」⇒「カスタマイズ」⇒「サイト基本情報」に進みます。

 

 

②「サイトアイコンを選択」をクリックして、
事前に準備しておいた画像をアップロードするだけ。

 

 

簡単でしょ？

 

Googleのサーチコンソール記載のファビコンガイドライン

通常、WordPressのサイトアイコンの設定が終われば、設定は完了です。

 

念のために、Googleサーチコンソールに記載されている
ファビコンに関するガイドラインを引用転記しておきますね。

 

各自、確認しておいてください。

 

検索結果に表示されるファビコンを定義する

 

サイトにファビコンが設定されている場合、
Google 検索でサイトの検索結果に含めることができます。

Search result on mobile showing a favicon

 

【実装】

サイトの検索結果にファビコンが表示されるようにする方法は次のとおりです。

 

以下のガイドラインに沿ってファビコンを作成します。

ホームページのヘッダーに次の構文の タグを追加します。

<link rel="shortcut icon" href="/path/to/favicon.ico">

rel
次のいずれかを指定できます。

"shortcut icon"
"icon"
"apple-touch-icon"
"apple-touch-icon-precomposed"

href
ファビコンの URL を指定します。

相対パス（/smile.ico）か絶対パス（https://example.com/smile.ico）で指定できますが、
ホームページと同じドメインである必要があります。

 

Google では、ホームページをクロールするたびにファビコンの有無、
またはファビコンの更新の有無を確認します。

 

ファビコンを変更し、Google にその変更を知らせたい場合は、
サイトのホームページのインデックス登録をリクエストできます。

 

更新が検索結果に反映されるまで、数日かかることがあります。

 

【ガイドライン】

検索結果の横にファビコンを表示するには、
次のガイドラインに準拠する必要があります。

 

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

 

Google がファビコンのファイルとホームページをクロールできること
（Google をブロックしないこと）。

 

ファビコンがウェブサイトのブランドを視覚的に表したものとなっており、
ユーザーが検索結果を見た際に一目でサイトを見分けられるようになっていること。

 

ファビコンのサイズが 48 ピクセルの倍数になっていること
（例: 48 x 48 ピクセル、96 x 96 ピクセル、144 x 144 ピクセルなど）。

 

SVG ファイルの場合は、サイズに関して特別な指定はありません。

 

 

有効なファビコン形式は、すべてサポートされています。

 

Google では画像サイズを 16 x 16 ピクセルに変換するため、
その解像度で適切に表示されるか、あらかじめご確認ください。

 

16 × 16 ピクセルのファビコンは指定しないでください。

 

ファビコンの URL は固定されている必要があります
（URL は頻繁に変更しないでください）。

 

わいせつな表現やヘイト表現に関連するシンボル
（例: かぎ十字章）などの不適切なファビコンは表示されません。

 

該当する表現がファビコン内で見つかった場合は、
デフォルトのアイコンに置き換えられます。

 

以上、Googleサーチコンソールからの引用転記でした。

まとめ

なんともあっけなく作れてしまったのではないでしょうか？

 

コツは「凝りすぎない」事だと思います。

 

読者から見てインパクトがあるもの
ひと目で見て覚えてもらえるのもが良いですね。

 

焦って、作らずにいろんなブログやサイトのファビコンを

片っ端から見てみると良いですよ。

 

目が肥えてくると、落としどころがつかめると思います。

 

ステキなファビコンを設置して、
更にブログの読者を増やしていきましょう！

• コピーしました