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

こんなお悩みを解決します。

本記事の内容

• ファビコンとは？
• WordPressファビコン設定4つのメリット
• WordPressファビコン設定3つの方法
• WordPressファビコン作成5つのコツ
• ファビコン作成におすすめ！フリー素材サイト3選
• WordPressのファビコン画像を用意する方法
• WordPressファビコン作成のたった一つの注意点
• WordPressのファビコンでよくある質問
• ファビコンはブランディングSEOで必須です

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以上の正方形」です。

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

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

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

たとえば、下記は「メンタリストDaigo」さんのファビコンですが、少し微妙ですよね？（謎の上から目線ですみませんm(._.)m）

否定するつもりはないですけど、ただでさえ小さい画像の中にネコちゃんが2匹描かれてるので、視認性は悪くなりますし、一瞬「何これ？」と感じる人も多いと思います。

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

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

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

日本人は「余白」の概念が好きですが、逆に小さくなって目立ちません。下記でも解説しますが「背景透過」も利用すれば、限りなくインパクトあるファビコンを実現できます。

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

ファビコンの背景は、透過させましょう。
スタイリッシュで、オシャレです。

あえて背景を活かしたデザイン設計でない限り、背景は透過させるのがベター。

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

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

WordPressのファビコン画像を用意する方法

それでは上記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」でどうぞ。背景も透過されてるので、便利ですね。

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

ファビコン画像の作成方法

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

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

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

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

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

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

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

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

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

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

コチラは「WordPressファビコン設定3つの方法」で解説しました。

WordPressファビコン作成のたった一つの注意点

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

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

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

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

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

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

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

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

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

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

WordPressのファビコン作成でよくある質問

WordPressのファビコン設定でよくある質問にもお答えします。

• 質問①：ファビコンのサイズ感は？
• 質問②：ファビコンの拡張子は？
• 質問③：ファビコンが変わりません...

 前提：Googleガイドラインを守る

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

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

質問①：ファビコンのサイズ感は？

WordPressのファビコンは「512 × 512ピクセル以上の正方形」が推奨サイズです。

これより解像度が低いと、画質が粗くなります。画質の悪いファビコンは、読者に違和感を与えるので、必ずデザイン性を意識してください。

質問②：ファビコンの拡張子は？

ファビコンのファイル形式は、下記のとおりです。

• その①：「.gif」形式
• その②：「.png」形式
• その③：「.ico」形式

フツーに「.png」形式の画像ファイルでOKです。

質問③：ファビコンが変わりません...

よく「ファビコンが表示されない...」といったお悩みも多いですね。

WordPress画面のタブ上では、ファビコンが表示されてるものの、検索結果ではファビコンが表示されてないパターン。

• 方法①：Favicon Generatorで確認
• 方法②：ブラウザキャッシュを削除
• 方法③：サイトをインデックス登録

上記を試しつつ、ファビコンが適切に表示されるか確認しましょう。

 方法①：Favicon Generatorで確認

まずは、ファビコンが正しく設定できているかを確認するため「Favicon Generator」を開きます。

正しいブログURLを入力し「Check Fabicon」をクリックします。

「Android」「iOS」「デスクトップブラウザ」の表示に対応していれば、OKです。

 方法②：ブラウザキャッシュを削除

ファビコン設定前の「ブラウザキャッシュ」が残っている場合があるため、キャッシュを削除してみましょう。

キャッシュとは、過去のアクセス履歴をブラウザに保存しておくことで、再びWebサイトにアクセスしたときに表示速度を速める機能です。

まずは、下記のコマンド操作より「スーパーリロード」を試してみましょう。

• Windows ：Ctrl + F5
• MacBook：Command + Shift + R

バグってる原因のほとんどは「キャッシュ」だったりします。キャッシュ削除は、ブログ運営で必須知識ですので、この際にマルっと覚えておきましょう。

 方法③：サイトをインデックス登録

Google検索にファビコンを表示するには、そもそも、ブログのURLがGoogleにクロールされ、インデックス登録される必要があります。

クロールには数日かかる場合もあるので、ファビコンがGoogle検索でも反映されるのをゆっくり待ちましょう。Googleインデックス登録の手順を解説します。

まずは「Googleサーチコンソール」の検索欄に「サイトURL」を入力し、[Enter]キーを押します。

本サイトの場合は、すでにインデックス登録済みでして、上記のような画面になります。まだ登録されてない場合は「インデックス登録をリクエスト」しましょう。

インデックス登録のリクエストを送信すると、上記の画面になります。

これにて、サイトのインデックス登録は完了。数日後、クローラーがサイトをクロールし、Google検索にインデックスされる「かも」です。

なお、必ずしもサイトや記事がGoogleにインデックス登録されるワケではありません。それゆえ「かも」と濁しました。

インデックス登録されない場合、Googleに「検索結果に表示させる価値ナシ」と判断されてる証拠です。インデックス登録の対策は、別記事をご用意しております。

ファビコンは、ブランディング戦略で必須です

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

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

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

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

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

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

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

【20個】WordPressおすすめ初期設定ガイド【失敗を避ける方法】

WordPressの初期設定でお悩みですか？本記事では、WordPressブログの開設後に絶対すべきおすすめ初期設定20個を解説します。ブログで失敗したくない方は必見です。

続きを見る

 WordPressブログの始め方

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

WordPressブログの始め方を知りたいですか？本記事では、WordPressブログの始め方やブログの全体像、開設後の初期設定やよくある質問にお答えします。たった10分でブログを始められますよ。

続きを見る