ファビコンを設定するのって意外と大変なんですよね。ファビコン用の画像を作成するだけでなく、少し特殊な形式「.ico」の画像も用意しなければいけない。

もっと手軽に設定したいとお考えの方は、WordPress(ver4.3以降)に標準で備わっているサイトアイコン設定機能を使ってみましょう。

この機能を使用すれば、画像を「.ico」形式に変換せずとも、簡単にファビコンを設定できます。当記事では、サイトアイコンの設定方法について解説しますので、ぜひ参考に設定してください。

ファビコンについての詳細は下記の記事をご覧ください。

WordPressのサイトアイコンの設定方法

この機能はどのテーマでも使用できますので、まずは、サイトアイコンの設定に必要な画像を用意します。下記の条件を満たした画像を作成しましょう。

画像サイズ:512×512px
画像形式:PNG

今回は、下記のサンプル画像を用意しましたので、こちらを使って設定していきます。

ファビコンサンプル画像

サイトアイコンに画像を登録する

画像を作成できたら、WordPressの管理画面の外観 > カスタマイズを選択します。

外観からカスタマイズを選択

次に「サイト基本情報」を選択します。

サイト基本情報を選択

サイト基本情報内の「サイトアイコンを選択」ボタンを押して、作成した画像を設定しましょう。画像を設定すると、下記のようにプレビューが表示されます。確認したら、画面上部の「公開」を押して設定完了です。

サイトアイコンを設定してプレビューを確認

サイトアイコンの表示を確認する

設定後は、ブラウザのタブ等でサイトアイコンの表示を確認しましょう。ここで、配色の変更やロゴ等の位置調整が必要と感じたら、画像を修正して再度アップロードしましょう。

もし配色に迷ったら、下記で紹介しているツールを参考にしてもいいですね。サンプル画像もカラーツールの配色をそのまま使用しています。

WordPressのサイトアイコン機能の注意点

サイトアイコン設定機能を使えば、手軽にファビコンを設定できますが、「.ico」形式の画像を設定できません。また、出力されるタグは下記の4つで固定になります。

<link rel=”icon” href=”…image-32×32.png” sizes=”32×32″ />
<link rel=”icon” href=”…image-192×192.png” sizes=”192×192″ />
<link rel=”apple-touch-icon” href=”…image-180×180.png” />
<meta name=”msapplication-TileImage” content=”…image-270×270.png” />

上記でも十分なのですが、古いブラウザへの対応が必要な方やより多くの画像サイズを用意したい方は、別の方法で画像を登録する必要があります。

TCDテーマをお使いの場合は、管理画面のテーマオプションから「.ico」形式の画像を登録できます。それ以外の方は、下記にファビコンを手軽に設定できるプラグインを紹介してますので、こちらを試してみても良いかもしれません。