WordPressブログのファビコンの作り方と表示させる設定方法を画像付きで解説

WordPressのファビコンの作り方と表示設定の方法

  • ブラウザのタブに画像を表示させたいんだけど…

 

すもベビ

ファビコンですね!

設定方法をすもベビが解説します。

 

ファビコン

ブラウザのタブに表示させる画像(上の画像の赤枠部分)を「ファビコン」と言います。

ごく小さな画像ですが、ブログ運営のアクセスアップにつながる重要な画像です。

 

この記事で分かること
  • ファビコンの重要性
  • ファビコンの作り方
  • ファビコンを表示させる設定方法

 

ファビコンとは

WordPressのファビコンの作り方と表示設定の方法

ファビコン(favicon)とは、Webブラウザのタブなどに表示される画像のことです。

「Favorite icon(お気に入りのアイコン)」が短縮されてファビコンになっています。

 

ファビコンが表示される場所

ファビコンが表示される場所は、実は少しずつ増えてきています。

 

Webブラウザのタブ

ファビコン

Webブラウザで新規ページを開いたときにタブの左側にファビコンが表示されます。

これはさすがに見たことがありますよね。

 

ブックマーク

Webページをブックマーク(お気に入り)すると、ブックマーク一覧にファビコンが表示されます。

ファビコン

 

ブックマーク一覧には各ページが「ファビコン+タイトルの一部」で表示されるので、目立つファビコンなら覚えてもらいやすくなります。

 

すもベビ

ブックマークというのは、よく見るページや好きなページをお気に入りとしてブラウザに保管しておける機能です。

 

検索結果

ファビコンは、スマホでGoogleやYahoo!の検索エンジンを利用したときの検索結果にも表示されます。

ファビコン

 

表示され始めたのは2019年5月からで、今後はPCの検索結果でも表示されるようになる可能性があります。

 

実は以前は、検索結果には3つの情報だけが表示されていました。

  • 記事タイトル
  • URL(パンくずリスト)
  • メタディスクリプション

現在はここにファビコンが追加で表示されています。

つまり、記事タイトルなどと同じくファビコンもクリック率に影響を及ぼすようになったということです。

 

ファビコンの重要性

ファビコンは、ブログのトレードマークとして重要な役割を果たします。

今ではほとんどのブログやサイトがファビコンを設定しているので、あなたのブログだけファビコンがないと「このブログ大丈夫かな」と不信感を抱かれます。

 

また、スマホの検索結果にも表示される仕様変更がなされたことで、アクセスアップにも影響を及ぼすようになっています。

 

ファビコンの作り方

WordPressのファビコンの作り方と表示設定の方法

ファビコンの作り方を書いていきます。

 

ファビコンを作るときのポイント

ファビコンを作るときのポイントは3つ。

  • ブログ全体のイメージと統一感を持たせる
  • 見やすくシンプルなデザインにする
  • 人目を引く色合いにする

 

ファビコンはSNSのアイコンと同じにする

TwitterなどのSNSを運用してブログと紐づけている場合、SNSのアイコンとブログのファビコンは同じにするのが基本です。

ブログとSNSで統一感を出して、ユーザーにあなたのブログだと認識してもらいやすくするためです。

SNSのアイコンを変更するときは、ファビコンも一緒に変えることを検討します。

 

ファビコンのサイズ

ファビコンのサイズは260×260以上がおすすめです。

 

ブラウザなどでファビコンが表示されるサイズは次のとおりです。

  • 16×16:インターネットエクスプローラー
  • 32×32:その他のブラウザ
  • 64×64:Windowsデスクトップ
  • 180×180:iPhone、iPad
  • 256×256:Androidスマホ

そのため260×260以上がおすすめなんです。

 

すもベビ

ファビコンは正方形なので、幅と高さを同じにそろえましょう。

 

ファビコンを作成できるツール

「ファビコン 作成」で検索すれば、ファビコンを作成できる無料ツールがいくつも表示されます。

私がファビコン作成で使うのは次の2つです。

  • Canva
  • favicon.cc
  • Favicon generator

 

Canvaはファビコン作成用のツールではありませんが、ファビコンからアイキャッチまで幅広い画像が作成できる無料ツールです。

直感的な操作でオシャレなファビコンが作れるので、初心者向きと言えます。

 

他の2つはファビコン作成に特化した海外の無料ツールです。

いずれも「ツール名 使い方」と検索すれば作り方を書いた記事が出てきます。

 

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

WordPressのファビコンの作り方と表示設定の方法

WordPressにファビコンを表示させる設定方法は3つあります。

  • テーマファイルを編集する
  • テーマの機能を使う
  • プラグインを使う

 

まず、最近のテーマにはファビコンを設定する機能が搭載されているものがあります。

使用中のテーマにファビコン設定機能があれば、そちらを使うのが最も簡単です。

 

残る2つの設定方法ですが、初心者向きなのはプラグインを使う方法です。

テーマファイルの編集はソースコードを書き加える作業があり、詳しくない人が作業すると不具合の原因になりかねません。

 

この記事では、初心者が簡単にファビコンを設定できる「プラグインを使う」方法のみ紹介します。

テーマファイルを編集したいなら、「ファビコン 設定方法」で検索すれば関連記事が出てきますが、おすすめはしません。

 

プラグイン「RealFaviconGenerator」ファビコンを表示させる設定方法

WordPressブログにファビコンを表示させるには、「RealFaviconGenerator」というプラグインを使います。

 

1.ファビコン画像をアップロードする

まず、ファビコン画像をWordPressにアップロードしておきます。

①メディア→②新規追加→③ファイルを選択と進みます。

ファビコン

 

ファイルが開くので④ファビコンに設定する画像を選び、⑤「開く」を押します。

ファビコン

 

すもベビ

画像をドラッグしてWordPress画面にドロップすることでもアップロードできます。

 

下の画像が表示されたらアップロードは完了です。

ファビコン

 

2.RealFaviconGeneratorをインストール

まず、ダッシュボードのメニューから①プラグイン→②新規追加と進みます。

ファビコン

 

プラグインの追加画面が表示されるので、③検索スペースに「RealFaviconGenerator」と入力します。

プラグインが表示されたら、④「今すぐインストール」を押します。

ファビコン

 

インストールが完了したら、⑤「有効化」を押します。

ファビコン

 

3.ファビコンを設定する

RealFaviconGeneratorが有効化されると、外観に⑥「Favicon」が追加されるので押します。

ファビコン

 

設定画面が開くので、⑦「Select from the Media Library」を押してメディア一覧を開きます。

ファビコン

 

メディア一覧から⑧ファビコンに使用する画像を選択して⑨「選択」を押します。

ファビコン

 

⑩「Generate favicon」を押せばファビコンの設定は完了です。

ファビコン

 

すもベビ

RealFaviconGeneratorでは、ファビコン画像の圧縮や表示パターンの設定もできます。

 

WordPressブログのファビコン作成と設定方法のまとめ

ファビコンはブログのトレードマークです。

2019年5月以降はスマホの検索結果に表示されるようになって重要性はさらに高まっています。

「小さい画像だし」と思って未設定の人もいますが、ブログの信頼性やクリック率を高める重要な項目なので、早めに設定しましょう。

 

「ファビコンの設定ってややこしそう」と思って敬遠している人もいるかもしれません。

でも、最近のテーマはファビコン設定機能が搭載されており、ボタン一つで設定できるテーマもあります。

また、未搭載のテーマを利用している場合でも、プラグインで簡単に設定できます。