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

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

管理画面から設定する

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

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

 

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

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

 

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

 

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

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

ファビコンとAppleタッチアイコン*を別々の画像に設定したい場合に便利です。

*Appleタッチアイコン：iosホーム画面追加時に表示されるアイコン

 

設定方法

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

 

有効化後、左メニューの「外観」内に追加される「Favicon」メニューをクリックします。
 
Browser Icon横の[Add Icon]からファビコン画像を設定し、Touch Icon横の[Set Icon]からタッチアイコン画像を設定します。

 

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

 

下記のような<link>タグを出力します。

 

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

header.phpに手動で設定する

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

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

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

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

 

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

まとめ

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