WordPressのブログにサイトアイコンを表示させる方法

サイトアイコンの作り方 WordPressカスタマイズ

ウェブブラウザのタブの左側に、最近ではいろんなアイコン(ファビコン)が設置されていますよね。
たくさんタブを開いていても、すぐにどのタブでどのサイトを開いているかわかるので便利です。

こんなのです。

ファビコンとは

WordPressブログにこのサイト独自のアイコンを設置する方法をご紹介します。
とても簡単なのに、オリジナル感が出るのでおすすめです!

ファビコンの作り方

ちょっと前までは、ファビコンを設置するためには、拡張子が.icoの画像ファイルをわざわざ作る必要がありました。
設置するのに手間がかかるというイメージだったのですが、WordPressのアップデートで、現在はすぐに設置が可能です。

テーマ→カスタマイズ→サイト基本情報 と進みます。

ファビコン 作り方

赤い枠の部分で画像を指定するだけです。

正方形、と書いてありますが、正方形でなくても、アップロードしたあとでトリミングできるので好きな画像をアップしましょう。

さらに、512ピクセル以上、とも指定がありますが、私が指定した画像は512ピクセルよりも小さいですが、特に不具合なく表示されています。小さめの画像でもあきらめずに試してみてください。

指定完了すると、このようにプレビューが表示されます。

ファビコン設置

「保存して公開」をクリックして、サイトを再読み込みすると、ファビコンの表示が確認できます。

ショートカットのアイコンにも

このサイトアイコンを設定することで、サイトへのショートカットを作ったときに、スマホのアイコンもこの指定した画像で表示されるようになります。

未設定だと、「E」など頭文字だけの味気ないアイコンなのですが、こうすることでとても素敵なアイコンで表示されるようになりました!

Before~

After~

サイトアイコンの作り方


Lightningテーマのファビコン設定に注意

Lightningテーマとセットで使うプラグイン、「VK ExUnit」のなかにもファビコンの設置メニューがあります。

ただこれだと、ウェブサイトのショートカットを作成したときのアイコンに、ファビコンが反映されません。

上のやり方、WordPress本体機能の「サイトアイコン」設定メニューから画像を指定したほうが、icoファイルをわざわざ作る必要もなく、手早く簡単です。

オリジナルのファビコンがタブに表示されるだけで、ちょっと嬉しいし、自分のブログにさらに愛着がわいてきます。
設定がまだの方、ぜひ試してみてください!

タイトルとURLをコピーしました