WordPressにファビコンとスマホタッチアイコンを設定する方法

WordPressにファビコンとスマホタッチアイコンを設定する方法

WordPressのVersion4.3以降、ファビコンとスマホタッチアイコンは管理画面から設定できるようになりました。テーマ独自の設定機能やプラグインは不要です。

設定

詳細はfavicon の作成 | WordPress Codexで確認して下さい。

準備する画像
  1. 大きさは「512×512ピクセル以上の正方形」推奨
  2. ファイル形式は「png」推奨

大きさは「512×512ピクセル以上の正方形」推奨となっていますが、ファビコンとスマホのタッチアイコンだけなら「192×192ピクセル以上の正方形」で十分な気もします。

ファイルは「jpeg」形式だと上手く読み込まれない端末があるので、「png」形式推奨です。

画像の準備ができたら、ダッシュボードの外観「カスタマイズ」をクリックします(ログインした状態で画面上のツールバー「カスタマイズ」をクリックでも可)。

カスタマイズをクリック

カスタマイズをクリック

メニューから「サイト基本情報」をクリックします。

サイト基本情報をクリック

サイト基本情報をクリック

サイトアイコンの「画像を選択」をクリックします。

サイトアイコンの「画像を選択」をクリック

サイトアイコンの「画像を選択」をクリック

画像をアップロードして「選択」をクリックします。

画像をアップロードして「選択」をクリック

画像をアップロードして「選択」をクリック

注意
512×512ピクセル以外の大きさの画像を選択すると、「画像切り抜き」画面が表示されます。一辺が512ピクセルより大きい画像は512ピクセルまでの範囲で切り抜くことができますが、一辺が512ピクセルより小さい画像を切り抜くことはできません。

サンプルを確認して問題なければ「公開」をクリックして設定は完了です。

サンプルを確認して問題なければ「公開」をクリック

サンプルを確認して問題なければ「公開」をクリック

※タッチアイコンは透過部分が黒く表示されます。

最後に

プラグインを導入して設定するなら、今回紹介したWordPress標準機能をおすすめします。

但し、Internet Explorer10以下のブラウザは「png」形式のファイルを認識しません(「ico」形式のファイルを使わないとファビコンが表示されない)。

全てに対応させたい方は、テーマ備え付けの機能やプラグインを導入して下さい。

スポンサーリンク
スポンサーリンク