クッソ簡単に、月10万円を稼ぎたいなら?

誰でもできる!
めちゃ少ないアクセスなのに
ザクザク稼げる仕組み⇒メルマガで配信中

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

目安時間:約 10分

ファビコン(サイトアイコン)の設定方法を教えてください。
という質問にお答えします。

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

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

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

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

検索結果が有利になるとかSEO的に効果があるという訳ではないですが、有ると無いでは印象はかなり違います。ブックマークに入れると、ファビコンが目印になるので、目に留まりやすく訪問回数も増えそうですよね。

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

 

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

    • ファビコンの作成方法
    • ファビコンの設定方法

ファビコンの作成方法

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

ブックマークバーにこうして並べてみると、各サイトごとに様々な色やマーク、文字を使って特色を出してますよね。わざわざ文字を読まなくても見た瞬間に自分の行きたいサイトの目印になります。

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

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

1)素材を準備する

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

WordPressでは、大きさは正方形で512×512ピクセル以上の画像が良いとされています。Google推奨の数値で行けば48×48の倍数が良いと書かれているので528×528で作成すれば問題ないという事ですね。

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

Facebookなら「f」ですし、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サーチコンソールからの引用転記でした。

まとめ

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

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

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

焦って、作らずにいろんなブログやサイトのファビコンを片っ端から見てみると良いですよ。

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

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

 

 

 

この記事が役に立った!
という方は「イイね」の代わりにポチして頂けると嬉しいです。
↓↓↓

アフィリエイトランキング

コメントフォーム

名前

 

メールアドレス

 

URL

 

 

コメント

トラックバックURL: 

7Daysランキング

MEGA profile

MEGAです。

2014年からアフィリエイトをはじめ、2017年に7桁を達成し会社を退職。

現在はアフィリエイト・マーケティング・コンサル・アフィリ塾講師等々、パソコン抱えて全国を飛び歩いてます。

アフィリのコンシェルジュMEGAが
あなたの稼ぎ、爆伸びさせます!

詳しい自己紹介はこちら

サイト内検索
MEGA式アフィリエイト

爆速で稼ぎたいならコレ!
常識破りのMEGA式ノウハウ


今だけ
・1年間サポート
・ブログ診断特典付き

人気ブログランキングに参加中。
応援のクリック!
宜しくお願いします♪


アフィリエイトランキング

サーバー選びはコレ

◆WordPressやるなら
エックスサーバー一択だ

そのサイト離脱・・エックスサーバーなら防げるかもしれない。
高速・安定性・低価格
サーバーの最高峰↓↓↓

カテゴリーからさがす
人気記事~読まれています
検索順位チェックツールGRC

あなたのブログ、今何位?
サイト成績表をひと目でチェックできる神ツールGRC。

タグからさがす
新着記事
Twitter
YouTube

キーワード選定苦手な奴、
ちょっと来い!

鬼分かりやすく解説するぞ。

コメント ありがとうございます
WordPressおすすめテンプレ

【WING】
アフィリエイターの為に作られたWPテーマの最高峰。

「稼ぐ」ための仕組みがギッシリ詰め込まれており
カスタマイズの自由度も半端ない!

WING


【賢威】

読み込み速度とSEOの強さは文句なし。
根強いファンに裏打ちされた実力派テーマ。

新たに8.0がリリースされているが、
もちろん、以前の7.2もダウンロード可能。



megablog~別館です。料理レシピ他