WordPressにファビコンを設定する3つの方法

WordPressにファビコンを設定する3つの方法をご紹介します。

管理画面から設定する

WordPress 6.5以降では、以下の手順で設定できます。

管理画面「設定 ＞ 一般設定」より「サイトアイコンを選択」をクリックし、512px × 512px以上の画像をアップロードします。

「変更を保存」をクリックして完了です。

クラシックテーマ、ブロックテーマいずれでも同様に設定可能です。

この機能では、アップロードした1枚の画像から複数サイズを自動生成し、下記のような <link>タグ を出力します。

• 1行目：モダンブラウザ用
• 2行目：Android/PWA用
• 3行目：Appleタッチアイコン（iOSホーム画面追加時に表示されるアイコン）用
• 4行目：Windowsタイル用

プラグイン「Favicon Rotator」を使用する

ファビコン と Appleタッチアイコン* を別々の画像に設定したい場合に便利です。
* Appleタッチアイコン：iosホーム画面追加時に表示されるアイコン

設定方法

1．プラグインをインストール・有効化

プラグイン「Favicon Rotator」をインストールし有効化します。

2．ファビコンとタッチアイコンを設定する

有効化後、左メニューの「外観」内に追加される「Favicon」メニューをクリックします。

Browser Icon 横の [Add Icon] からファビコン画像を設定し、
Touch Icon 横の [Set Icon] からタッチアイコン画像を設定します。

「設定の保存」をクリックして完了です。

この方法では、下記のような <link>タグ が出力されます。

• 古いブラウザで主流だった rel="shortcut icon" が使用される
• Appleタッチアイコンも古い形式（-precomposed）
• モダンブラウザには対応するものの、AndroidやPWA、Windowsタイル向けなどは出力されない

header.php に手動で設定する

テーマファイルの編集に慣れている開発者向けです。

1．ファビコンとタッチアイコンをルートディレクトリにアップロードする

FTPソフトを使用し、以下のファイルをルートディレクトリにアップロードします。

• favicon.ico
• favicon.svg
• apple-touch-icon.png

各ファイルの作成方法については、2025年9月現在、以下の記事が大変参考になります。

2．header.php にコードを追記する

次に、テーマディレクトリ内の header.php に以下のコードを追記します。

まとめ

ファビコンは設定方法によって見た目や互換性が微妙に変わります。
特にSVGを活用したい場合や最新ブラウザに最適化したい場合は、WordPressの機能やプラグインに加え、必要に応じてSVG＋ICOなどを併用する方法が有効です。
自サイトの目的や環境に合わせて、最適な設定を組み合わせて活用しましょう。