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

  • 更新日
  • カテゴリー WordPress
ブラウザ アドレスバー

WordPress 4.3 からファビコン（favicon）が簡単に設定できるようになりました。

WordPress では「サイトアイコン」という名称になっており、ブラウザのタブやブックマークで読み込まれるファビコンと、スマホで読み込まれる Web Clip アイコンを同時に生成するようになっています。

アップロードして切り抜きするだけの作業ですが、注意点と合わせて手順をご紹介します。

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

STEP1
画像を用意する

画像の大きさは、幅 512 ピクセル × 高さ 512 ピクセル以上が推奨サイズとなっています。これより小さなサイズだと、画像が粗くなるので注意してください。

また、形式についてはとくに注釈がないのですが、iOS で読み込まれるアイコンが同時生成されるため PNG 形式で作成したほうがよいでしょう。

実際には以下の 4 種類が自動的に出力されます。

<link rel="icon" href="cropped-icon-32x32.png" sizes="32x32" />
<link rel="icon" href="cropped-icon-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon-precomposed" href="cropped-icon-180x180.png" />
<meta name="msapplication-TileImage" content="cropped-icon-270x270.png" />

JPEG 形式でアップするとすべて .jpg になってしまうため、一部端末ではうまく読み込まれないと思います。

STEP2
画像のアップロードと保存

サイトアイコンの設定は、管理画面サイドバーの「外観」から行います。

WordPress管理画面－外観

「外観」→「カスタマイズ」へと進むと、カスタマイズ画面（カスタマイザー）が出てきます。

テーマによって表示される項目が違いますが、仕様が大きく変更されていなければ「サイト基本情報」を探してください。

WordPress カスタマイズ

一番下に「サイトアイコン」欄が出てくるので、ここからファイルを選択します。

WordPress サイトアイコンファイル選択

すでにアップロード済みの画像を選択するか、新たにアップロードしましょう。

サイトアイコン画像選択

画像を選択すると、切り抜き画面に移ります。

右側にブラウザやアプリでの表示イメージが出てくるので、確認しながら切り抜き範囲を決定。すでに最適化されている場合はそのまま「画像切り抜き」ボタンを押してください。

WordPress サイトアイコン切り抜き

再びカスタマイズ画面に戻るので、「保存して公開」ボタンを押せば完了！

WordPress サイトアイコン保存・公開

従来は設定するのがわりと面倒だったサイトアイコンですが、これなら簡単ですね。

テーマを変更してもこの情報は保存されるので、再設定の必要はありません。

自動的に出力されるアイコンの種類

先ほどもご紹介したとおり、以下の 4 つが <head> 内に出力されます。

<link rel="icon" href="cropped-icon-32x32.png" sizes="32x32" />
<link rel="icon" href="cropped-icon-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon-precomposed" href="cropped-icon-180x180.png" />
<meta name="msapplication-TileImage" content="cropped-icon-270x270.png" />

1・2 行目は解像度の違うアイコンで、ユーザーの環境に合わせてどちらかが読み込まれます。

3 行目の「apple-touch-icon-precomposed」は、おもにスマホのホームアイコンで使われます。この記述だと、光沢処理はされません。

4 行目の「msapplication-TileImage」は Windows8 のピン留めに使われます。

ちなみに、すべてのブラウザや端末に完璧に対応することを考えると、20 種類以上のサイズが必要だと言われています。ただ、最適なサイズが見つからなければ近いものを探してくれるので、とりあえずこれだけあれば充分かなと思います。

Internet Explorer10以下は対応していない

WordPress テーマのなかにはデフォルトのファビコンとして、「shortcut icon」が指定されているものもあります。

<link rel="shortcut icon" href="images/favicon.ico" />

IE10 以下のブラウザは .ico 以外は認識してくれませんが、2020 年時点でほとんど使われていないため改めて設定する必要はないでしょう。

IE11 で 1 ％ぐらいのシェア率です。

2020年のブラウザシェア率
Browser Version (Partially Combined) Market Share Worldwide

まとめ

WordPress 「サイトアイコン」設定方法のご紹介でした。

  • 画像の大きさ（ピクセル）は 512 × 512 以上
  • 画像の形式は PNG 推奨

それでは、また。

Author

Naifix 編集部
Web コンサルティング業務を中心に、サイト制作・コンテンツ販売・メディア運営代行業務を行っております。当サイト（Naifix）では、おもにブログ初心者向けのノウハウを無料で配信しています。

執筆・監修　Direx Marketing, Inc.