WordPress ファビコン(サイトのシンボルマーク)設定方法

プラグイン

ファビコンとは、ブログやホームページの「シンボルマーク」の事で、
「お気に入りアイコン(favorite icon)」を縮約したものです。

ブログなど、Webサイトにアクセスした際、ウィンドウの左にシンボルマークが表示されます。

ファビコン

また、ファビコンはスマホやiPhoneでお気に入りに追加した際、
ホームに追加したときなどに、アイコンとして使用されます。

WordPressでは、ファビコンの設定がプラグインで簡単に行えます。

ファビコンの設定していない方は、
Favicon by RealFaviconGenerator を利用して、ファビコンの設定を行いましょう。

ファビコンの設定を行う前に、ファビコン用の画像を作成しておきましょう。
画像の推奨サイズは「200×200」です。
当ブログのファビコンは無料画像作成サイト もじまる で作成しています。
もじまる
無料画像加工サイト、文字入れやアニメGIF作成、スタンプなどなど簡単に画像加工できます。
スポンサーリンク

Favicon by RealFaviconGenerator のインストール

ダッシュボードから「プラグイン → 新規追加」をクリックし、
検索窓で「Favicon by RealFaviconGenerator」と検索しましょう。

ファビコンインストール

検索後、Favicon by RealFaviconGenerator の今すぐインストールをクリック。

ファビコンインストール

インストール後「プラグインを有効化」をクリックすれば完了です。

Favicon by RealFaviconGenerator の設定

ファビコンの設定は、ダッシュボード左の「設定 → favicon」をクリックし、
「Appearance > Favicon」をクリックします。

Favicon by RealFaviconGenerator の設定

「Select your Favicon picture」をクリック。

Favicon by RealFaviconGenerator の設定

クリックすると、2つの選択肢が表示されるので、
右の青いボタン「Continue with this picture」をクリック。

Favicon by RealFaviconGenerator の設定

「Continue with this picture」をクリックすると、下の画面が表示されます。

ここで、背景色・App name などの設定を行いましょう。
iOS、Androidなどの背景色の設定が行えます。
設定を終えたら、ページ一番下の「Generate your Favicons and HTML code」をクリック。

Favicon by RealFaviconGenerator の設定Favicon by RealFaviconGenerator の設定Favicon by RealFaviconGenerator の設定

App nameを設定していない場合、
「Generate your Favicons and HTML code」をクリックしても、
以下の画面が表示されるので、App nameの設定は必ず行いましょう。

Favicon by RealFaviconGenerator の設定

すべての設定が終わったらファビコンの設定は完了です。
完了したら、Faviconの設定画面に、設定した画像が表示されます。

Favicon by RealFaviconGenerator の設定

設定したファビコンを確認したい場合は「Check your favicon」から確認を行えます。

ファビコンを変更したい場合は「Generate favicon」から、
新たに画像をアップロードすれば変更可能です。

この際に、ユーザープロフィールの画像も変更しましょう!

WordPress ユーザープロフィールのアバター画像を設定するプラグイン
WordPress のコメントをした際に表示される「アイコン画像」などに使われる、プロフィールのアバター画像を設定できるプラグインが「Simple Local Avatars」です。通常は、Gravatarに登録しなければ画像を設定できませんが、「Simple Local Avatars」を使えば、簡単に…

まとめ

  • ファビコンとは、ブログやホームページの「シンボルマーク」のこと。
  • ファビコンを設定する前に、ファビコン用の画像を作成する。
  • ファビコンの画像サイズは「200×200」がベスト。
  • ファビコンの設定は「Favicon by RealFaviconGenerator」をインストールする。
  • 設定では「App name」の設定も必ず行う。

コメント