MENU

プロフィール

カワテ タカヒト

WordPressと店舗型ビジネスへの集客施策が得意なフリーランス☆27歳で起業→ウェブ制作会社→美容系サービス業を経て48歳で2度目のフリーランスに。山梨県南アルプス市在住。

山梨WordPressmeetup

山梨WordPress meetupを毎月開催しています。ご参加をお待ちしております!

WordPressでファビコン(サイトアイコン)を設定する方法

WordPressでファビコン(サイトアイコン)を設定する方法

WordPressを開設したらファビコンを設定しましょう。

ファビコンとはサイトを象徴するアイコン画像のこと。Googleのスマホ検索画面でもファビコンは目立つ位置に表示されています。

WordPressを開設したらファビコンを設定しましょう。ファビコンとはサイトを象徴するアイコン画像のこと。Googleのスマホ検索画面でもファビコンが目立ついちに表示されています。

今日のブログでは、サイトを象徴する顔となるアイコン「ファビコン」をWordPressで設定する方法について解説します。

ファビコンはどこに表示される?

ファビコンはデバイス上の様々な場所で利用されています。

1.ブラウザのタブ

ブラウザでサイトを開いた際、タブにサイトタイトルと一緒にファビコンが表示されます。

ブラウザのタブ / ブラウザでサイトを開いた際、タブにサイトタイトルと一緒にファビコンが表示されます。

2.スマートフォンのホーム画面

iphoneやAndroidでサイトをホーム画面に追加するとファビコンが表示されます。サイズも大きめで目立ちます。

スマートフォンのホーム画面
iphoneやAndroidでサイトをホーム画面に追加した際にもファビコンが表示されます。目立つ大きなサイズです。

3.Googleの検索結果 (スマートフォン)

現在はスマートフォンのみですが、近くWeb版でもアイコンが表示される予定です。

現在はスマートフォンのみですが、近くWEB版でもアイコンが表示される予定です。

また、Googleトップページのショートカットでも利用されています。

またGoogleトップページのショートカットでも利用されています。

と、
いろんな場面で利用されているファビコン。
まさにサイトを象徴する顔ともいえます。

ファビコンのサイズ

WordPressで推奨されている画像サイズは縦横512ピクセル以上の正方形

WordPressでは、画像を1つ用意すれば各デバイスに合わせて自動で最適化してくれます。

画像の制作はスマートフォンの無料アプリ、CANVAなどを利用して簡単に作成できます。


関連記事[ Canva ] 無料でWordPress用タイトルロゴを作る方法

関連記事:[ Canva ] 無料でWordPress用タイトルロゴを作る方法

ファビコン制作のポイント

1.デザインのポイント

とにかくシンプルが一番。

一番小さなものでは数ミリ程度でしか表示されませんので、文字を詰め込みすぎると何が書いてあるのか読めません。

会社のロゴや、屋号の頭文字1文字でデザインするのがオススメです。

とにかくシンプルが一番。一番小さなものでは数ミリ程度でしか表示されませんので、文字を詰め込みすぎると何が書いてあるのか読めません。会社のロゴや、屋号の頭文字1文字でデザインするのがオススメです。

2.ブランドカラーを利用する

ファビコンにはブランドカラーやサイトを象徴する色を使いましょう。

何度もサイトを訪れるユーザーはファビコンも頻繁に目にします。色でサイトを印象付けておくと、ブックマークや検索結果画面でサイトを探しやすくなります。

色数も背景1色、ロゴ1色など少ない方が視認性も高まります。

3.背景を透過させる

背景を塗りつぶさないファビコンの場合、背景を透過させると見た目もきれいです。

背景を透過させるには「.jpeg」形式ではなく「.png」か「.gif」形式で保存します。

アイコン画像のみなど背景を塗りつぶさないファビコンの場合、背景を透過させると見た目もきれいです。背景を透過させるには「.jpeg」形式ではなく、「.png」か「.gif」形式で保存します。

4.デザインまとめ

WordPressでのファビコン設定方法

ファビコン画像が準備できたらWordPressで設定していきます。

メニューの [外観] > [カスタマイズ] から入り、 [サイト基本情報]をクリック。

WordPressでのファビコン設定方法
メニューの [外観] > [カスタマイズ] から入り、 [サイト基本情報]をクリック。
[ サイトアイコンを選択 ] をクリック。

[ サイトアイコンを選択 ]  をクリック。

ファビコンに設定したい画像をアップロードして [ 選択 ] します。

ファビコンに設定したい画像をアップロードして [ 選択 ] します。

これでファビコンが登録されました。

これでファビコンが登録されました。

ブラウザでブログを開いて、ファビコンが登録されているか確認してみましょう。

ブラウザでブログを開いて、ファビコンが登録されているか確認してみましょう。

まとめ

WordPressにサイトの顔となるアイコン「ファビコン」を設定する方法についてご紹介しました。

通常のwebサイトではデバイス毎に何種類ものファビコンを設定しなければなりませんが、WordPressではその手間を簡略化し1枚の画像をアップロードするだけで完了するのが嬉しいですね。

ファビコンはサイトの顔となる大切な要素ですので、面倒くさがらずにしっかりと設定しておきましょう。