【簡単】WordPressブログのファビコン設定&作成マニュアル【ブランディング戦略の重要性】

WordPressのファビコン設定&作成方法を知りたいですか？

本記事では、WordPressのブランディング戦略として重要な「ファビコン」の具体的な設定方法や作り方を解説します。

この記事を読むと、ファビコンの重要性を理解しつつ、WordPressの初期設定で必要なファビコンをブログ初心者さんでもサクッと作ることができます。

また、ファビコンが表示されない場合の対処法についても、丁寧に解答しました。

ファビコンは、ブログ運営の「看板娘」です。事実、ブログサイトの「顔」としてブランディングできますから、本記事を読み終えたら、ファビコンを設定しましょう。

ファビコンとは？

ファビコンとは、ブラウザのタブやブックマーク、検索結果に表示される小さな「アイコン画像」のことです。ファビコンは、下記の場所に表示されます。

• 表示場所①：PCタブ
• 表示場所②：PC検索画面
• 表示場所③：ブックマーク
• 表示場所④：モバイル検索画面

PC画面の場合、画面上部「タブ」と呼ばれる場所に、ファビコンが表示されます。

また、サイトや記事をブックマークした際にも、ファビコンが表示されます。

スマホ検索でも、検索結果にファビコンが表示される仕様です。また、2023年3月より、PC検索上でも、ファビコンとサイト名が表示されるようになりました。

Favicons and site names are coming to desktop! You can learn more about how to provide site names and define favicons in search results here:https://t.co/AGkfEeIbIs https://t.co/E7PxSacIIx https://t.co/WBHGf12Xkw

— Google Search Central (@googlesearchc) March 8, 2023

ファビコンを設置する目的

ファビコンを設置する目的（本質）は「ブランディング」にあります。

• 目的①：リピーター対策
• 目的②：ブランディング対策

ファビコンは「目印」にもなりますし、タブを開きすぎてサイト上で迷子になったときでさえ、ファビコン頼りに目的ページへの到達も可能です。

ファビコンは、直接的なSEO対策ではありませんが、ブランディング戦略における「脳内SEO」として、必須ですね。

このようにファビコンは、ユーザーの利便性を向上する重要な施策の一つ。単に装飾目的ではなく、ブランディング戦略の一環として、クリック率UPに効果アリですよ。

WordPressデフォルトのファビコンはNG

ファビコンを設定してない場合、ファビコン =「WordPressマーク」として自動表示されます。

むしろ、読者からすると「うーむ...この記事は微妙そうだから、スルーしよう...」という心理が働き、クリック率が低下します。

読者に「この記事は、〇〇さんだ」と脳内ハックを仕掛けられるよう、必ずオリジナルのファビコンを作りましょう。

WordPressブログにファビコンを設定するメリット4つ

WordPressブログを運営するなら、120%ファビコンを設定した方が良いですよ。メリットは、下記のとおりです。

• メリット①：検索結果に表示される
• メリット②：ブランディング戦略につながる
• メリット③：目印になり、ユーザーが迷子にならない
• メリット④：ユーザーファースト

それは機会損失ですので、必ずファビコン対策を行うべきです。

メリット①：検索結果にファビコンが表示される

ファビコンを設定すると、検索結果にファビコンとサイト名（ページタイトル）がセットで表示されます。

キャッチーでインパクトあるファビコンを作れば、検索画面で目立ちますし、ユーザーからクリックされやすくなるので、ぜひおすすめです。

ファビコンは、テキスト情報であるページタイトルやメタディスクリプションより、一瞬で決定的情報を与えられます。ファビコンは「キャッチーなデザイン」にしましょう。

メリット②：ブランディング戦略として有効

WordPressでファビコンを設定すれば、サイトのイメージ作りやブランディングに役立ちます。

おそらく「青い鳥」を想像しませんでしたか？

これこそ、まさに「ブランディング」でして、言葉は悪いですが、いわば「洗脳」です。そのため多くの人は、Twitter =「青」「鳥」といったイメージを持ってるハズ。

 純粋想起をとる

つまり「〇〇といえば、あなた」（マーケティング用語で「純粋想起をとる」）というユーザー認知を狙う戦略として、ファビコンは効果的です。

さらに、良い記事を書いて読者満足度も高まれば、リピーターにつながりますし、ファビコンを見ただけで「あなたのブログ」という脳内ハックも狙えます。

結果として、クリック率も高まりますし、直接的なSEO対策というより、むしろ間接的な「脳内SEO」としてファビコンは「効果抜群」です。

メリット③：目印になり迷子にならない

タブを検索画面でたくさん開いた場合も、ファビコンが目印になってくれるので、サイト上で迷子になりません。

文字より画像に視線が注目するので、こーいう意味でも、ファビコンは重要です。

メリット④：ユーザーファーストになる

ブログ購読者の中には「ブックマーク」や「お気に入り」でサイト管理してる人もいます。

ファビコンが設定されないと、WordPressマークになります。逐一サイト名で確認しなければならないのは、読者ファーストじゃないですよね？

ブログの「固定ファン」を作るには、ユーザーファーストの意識が大切です。紳士になりましょう。

WordPressブログのファビコンを設定する方法3つ

WordPressでファビコンを設定&表示する方法を解説します。

• 方法①：WordPressのデフォルト機能
• 方法②：WordPressのテーマファイルを編集
• 方法③：WordPressのプラグインを使う

ファビコンの設定方法は、上記のとおりですが「方法①」だけ理解すればOKです。

テーマファイルをいじったり、プラグインを使う方法もありますが、WordPressの標準機能を使えば、マルっと秒で解決できるので、今回は割愛します。

方法①：WordPressのデフォルト機能

WordPress管理画面「外観」＞「カスタマイズ」＞「サイト基本情報」に進みます。

「サイトアイコンを選択」より、画像を指定してアップロードします。

UPするファビコン画像を「選択」し、代替テキスト（alt属性）とタイトルを入力しましょう。

ファビコンのプレビューを確認しつつ、問題ないなら「切り抜かない」を選択します。必要な場合は、切り抜いて「正方形」に調節してください。

上記で問題なければ「公開」をクリックします。しばらくすると、WordPress画面に反映されます。

WordPressブログのファビコンを作成するコツ5つ

WordPressブログの「顔」であるファビコン。その存在は小さいながらも、ユーザーを惹きつけ、固定読者の脳内をハックする、魅力的なデザイン設計が大切です。

• コツ①：正方形のアイコン
• コツ②：シンプル・イズ・ベスト
• コツ③：デザインを大きく目立たせる
• コツ④：背景を透過させる
• コツ⑤：上下左右の中央配置

上記5つのコツを押さえつつ、ブランディング戦略も意識しながら、魅力的なファビコンを作りましょう。

コツ①：正方形のアイコン

ファビコンは、ほとんどのブラウザで正方形にクリップされるため、正方形のアイコンを使用します。

なお、ファビコンのサイズは「16px × 16px」や「32px × 32px」とか言われてますけど、WordPressですと「512px × 512px以上の正方形」です。

ピクセル数が少ない =「画質が荒くなる」ですので、高解像度のファビコン画像を用意しましょうね。

コツ②：シンプル・イズ・ベスト

ファビコンはとても小さい画像のため、複雑なデザインだと視認性が悪くなります。

• 細かいデザインを避ける
• テキストも避ける

必ず「1トピック」を意識してください。

コツ③：デザインを大きく目立たせる

ファビコンは、ただでさえ小さな画像。
デザインは、最大化させましょう。

余白などあまり気にせず、とにかくインパクト重視にデザインしてください。

コツ④：背景を透過させる

場合によっては、ファビコンの背景を「透過」させるのもアリです。

当サイトも試験的に透過デザインを試しましたが、いまいちでした。ABテストしつつ、インパクトある方を選びましょう。

コツ⑤：上下左右の中央配置

ファビコンのトピックは、上下左右の中央揃えにドカンと配置しましょう。どのサイトも、きっちり中心寄せしてますので、セオリーから外れるのは論外です。

WordPressブログのファビコン画像を作る方法3つ

それでは上記5つのコツを踏まえ、ファビコンを作成する方法を解説します。

• 方法①：フリー素材
• 方法②：自作
• 方法③：外注

方法①：フリー素材

ファビコン素材を用意するなら「フリー素材」がおすすめです。

• 理由①：無料で使える
• 理由②：時短で効率的
• 理由③：洗礼されてる

種類も豊富で可愛いらしいマテリアルデザインから、シンプルでオシャレな洗礼されたデザインまで、いろんな種類のファビコンが「無料」で利用できます。

詳しくは「ファビコン作成におすすめ！フリー素材サイト3選」で解説します。

方法②：自作

Webデザインの知見がある人は、ファビコンを自作するのもありですね。世界で一つだけのファビコンを作りましょう。

とはいえ、デザイン知識のない人が、ファビコンを自作しようとすると、ほぼほぼ失敗します。

というのも、デザインにインパクトがなかったり、色使いが微妙だったりして、イマイチになってしまうからです。

デザイン知識や経験の乏しい人は、自作をあまり推奨しません。フリー素材もたくさんありますし、すでに完成されたデザインを使うことをおすすめします。

方法③：外注

小綺麗でオリジナリティあるファビコンをプロのデザイナーやイラストレーターに依頼するのもアリですね。

オリジナリティ&クオリティ高いファビコンを用意するなら、やはりプロに依頼したほうが満足いく結果になります。

セットで、ロゴやヘッダー画像などの依頼も検討できます。デザインを外注するなら「ココナラ」が定番ですよ。

ファビコン作成におすすめ！フリー素材サイト3選

ファビコンに使えるおすすめフリー素材サイトを3つ紹介します。

• その①：FLAT ICON DESIGN
• その②：ICOOON MONO
• その③：Icon-rainbow

>> 関連記事：【22選】おしゃれブログに大変身！フリー素材・無料画像おすすめサイト【用途別に紹介】

その①：FLAT ICON DESIGN

FLAT ICON DESIGN（フラット アイコン デザイン）は、商用利用可能&無料で使える、マテリアルデザインが可愛らしいフラットなアイコンに最適なフリー素材サイト。

JPG、PNGはもちろんのこと、「illustrator」「photoshop」で編集可能なベクターデータ、EPSデータ、どのデバイスでも劣化しない＆軽量な「SVG」もあります。

アイコンサイズは「512 × 512」、ファイル名は「PNG」or「SVG」を選びましょう。また「背景なし」画像データもダウンロードできます。

背景を別素材で組み合わせれば、オリジナリティあるファビコンに仕上げられますね。

その②：ICOOON MONO

ICOOON MONO（アイコーン モノ）は、商用利用可能&無料で使えるモノトーンのアイコン素材サイト。

シンプルなデザインで可愛らしいアイコンがたくさん用意されており、こちらも非常におすすめです。

お好きな素材から、サイズは「512px」を、カラーも自由に決めて、ファイルは「SVG」or「PNG」でダウンロードできます。背景も透過されており、使い勝手は抜群。

ぜひ、コチラも使って見てください。
マジ、おすすめです。

その③：Icon-rainbow

Icon-rainbow（アイコン レインボー）は、商用利用可能&無料で使えるアイコンをダウンロードできるサイト。

上記「ICOOON MONO」と似てますが、デザインに幅を持たせたいとき、コチラもご覧いただくと、お気に入りのアイコンが見つかるかもです。

サイズは「512px」を、カラーも好きに選べ、ファイルは「SVG」or「PNG」でどうぞ。背景も透過されてるので、便利ですね。

フラットデザインが可愛いですので、ファビコン用におすすめなサイトです。ぜひコチラもお使いください。

WordPressブログのファビコン画像の作成方法【3ステップ】

今回は無料で使える「Canva」と「ラッコツールズ-透過画像作成」という2つのツールを使って解説します。

• 手順①：Canvaでデザイン調整
• 手順②：ラッコツールズで透過画像をダウンロード
• 手順③：WordPressにファビコン画像をUP

なお、有料プランを申し込むと、透過画像をダイレクトでダウンロードできますので、工程が一つ減ります。

手順①：Canvaでデザイン調整

まずは「Canva」にアクセスし、「カスタムサイズ」より「512 ×512」ピクセルでデザインの枠を作ります。

ダウンロードしたファビコン画像をアップロードし、白枠の中に格納します。その際、大きさは最大化させましょう。

右上の「共有」より、PNGファイルをダウンロードします。有料プランですと、背景透過された画像をダウンロードできます。二度手間になりますが、仕方ありませんね。

手順②：ラッコツールズで透過画像をダウンロード

続いて「ラッコツールズ-透過画像作成」より、Canvaでダウンロードした画像をアップロードし、新たに背景を削除した画像をダウンロードしましょう。

手順③：WordPressにファビコン画像をUP

コチラは「WordPressブログのファビコンを設定する方法3つ」にて解説しました。

WordPressブログのファビコン作成の注意点

ズバリ、他人と被らないファビコンにしましょう。

絶対にファビコンを被せない

ファビコン作成でフリー素材を扱うデメリットとしては、他人とデザインが被る可能性が挙げられます。

たまにインフルエンサーと同じ、もしくは似たようなファビコンにしてる人を見かけますが、マジで意味ないので、やめた方がいいですね。

ユーザーから「なんだ...偽物かよ」と判定されたら、その時点で信頼性が失われてしまいますので。

 オリジナルのファビコンを作ろう

ブログに本腰入れるなら、他人と被らないオリジナルのファビコンを用意しましょう。

• 理由①：信頼性につながる
• 理由②：差別化につながる
• 理由③：認知度もUPする

たとえ、同じハンバーガーチェーン店でも「マクドナルド」と「モスバーガー」のロゴデザインは大きく異なります。

すでに認知されてるデザインに被せても、むしろ「逆効果」ですので、差別化をはかりつつ、独自のブランドを構築してください。

WordPressブログのファビコン作成でよくある質問3つ

 Googleガイドラインを守ろう

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

引用元：Google検索セントラル｜検索結果に表示するファビコンを定義する

WordPressブログはファビコンでブランディングせよ

本記事では、WordPressブログのファビコン設定方法や作り方を解説しました。

• メリット①：検索結果に表示される
• メリット②：ブランディング戦略につながる
• メリット③：目印になり、ユーザーが迷子にならない
• メリット④：ユーザーファースト

ファビコンがないと「手抜き」という印象を与えかねません。クリック率が下がり、固定読者もつきにくです。また、ユーザー視点でも不親切でしたね。

細かいですが、ファビコンをしっかり作り込むことで、ブログ運営の熱意や信頼性をユーザーにアピールできます。

上記コツ5つを意識しつつ、魅力的なファビコンを作ってください。そして、ファビコン =「ブランディング」です。戦略的に、サイトの付加価値を高めましょう。

というわけで、今回は以上です。本記事を読み終えたら、今すぐファビコンを作ってくださいね。

また、WordPressで行うべき設定は他にもいくつかあります。セットで【20個】WordPressおすすめ初期設定ガイド【失敗を避ける方法】もどうぞ。

 WordPressブログの始め方

【無料】たった10分でできるWordPressブログの始め方【エックスサーバー】

続きを見る