WordPressにファビコンを設定する方法：2026年版ガイド

ブラウザのタブを見て、自分のWordPressサイトにまだ一般的な灰色の地球儀やデフォルトの「W」ロゴが表示されていることにイライラした経験があるなら、それはあなただけではありません。それは「趣味のプロジェクト」と「人々が実際に信頼するブランド」を分ける、ほんの些細なディテールです。2026年にもなれば、ユーザーはデスクトップのタブからモバイルのホーム画面のブックマークまで、シームレスな視覚体験を期待しています。

WordPressの「サイトアイコン」 vs. 従来のFavicon

WordPressには独自の方法があります。ダッシュボードではfaviconとは呼ばず、サイトアイコンと呼びます。良い点は、WordPressが多くの面倒な作業（複数サイズの生成など）を自動的に処理してくれることです。悪い点は、もし適当な低解像度のPNGをアップロードしてしまうと、iPhoneやMacBook Proのような高密度ディスプレイではぼやけて表示されてしまうことです。

始める前に、正方形の画像が必要です。512x512ピクセルのPNGまたはSVGを推奨します。もしあなたのロゴが長方形なら、無理やり押しつぶさないでください。シンプルで正方形のバージョンを作成する必要があります。Stripeを見てみましょう。彼らのメインロゴはワードマークですが、faviconは紫色の背景に太字でシンプルな「S」です。これは16x16ピクセルでも判読可能です。複雑なロゴをお持ちの場合は、Mzu favicondlのようなツールを使って、アップロードする前に小さいサイズでどのように見えるかテストしてください。

方法1：モダンな方法（ブロックテーマとサイトエディター）

モダンなブロックテーマ（Twenty Twenty-FourやTwenty Twenty-Fiveなど）を使用している場合、カスタマイザーはしばしば非表示になっています。2026年における設定の見つけ方は以下の通りです。

1. WordPressダッシュボードから外観 > エディターに移動します。
2. スタイルアイコン（右上の半円のアイコン）をクリックします。
3. 編集（鉛筆）アイコンをクリックしてスタイル設定に入ります。
4. サイトの基本情報を探します（テーマによっては「一般」や「ヘッダー」の下にネストされていることもあります）。
5. サイトアイコンを選択をクリックし、512x512のファイルをアップロードします。

方法2：クラシックな方法（カスタマイザー）

まだクラシックテーマを実行している方や、Elementorのようなページビルダーを使用している方にとって、昔ながらのカスタマイザーは最高の味方です。より速く、より直接的です。

1. 外観 > カスタマイズに移動します。
2. サイトの基本情報タブを見つけます。
3. サイトアイコンのセクションまでスクロールダウンします。
4. 画像をアップロードします。WordPressがブラウザタブやモバイルアプリのアイコンとしてどのように表示されるかのプレビューを表示してくれます。

変更が反映されない場合、それはほとんどの場合キャッシュの問題です。faviconが表示されない場合のガイドをチェックして、一般的な原因のトラブルシューティングを行ってください。

方法3：開発者向けの方法（手動でのコード追加）

時には、WordPressの組み込み機能では十分な制御ができないことがあります。例えば、スケーリングやダークモード対応に優れたモダンなSVG faviconを使いたい場合などです。その場合は、UIをスキップして直接コードを記述します。

faviconファイル（ICO, PNG, SVG）をテーマフォルダ（例：/wp-content/themes/your-theme/assets/favicons/）にアップロードします。次に、このコードをfunctions.phpファイルに追加します。

function mzu_custom_favicon() {
    echo '<link rel="icon" href="' . get_stylesheet_directory_uri() . '/assets/favicons/favicon.svg" type="image/svg+xml">';
    echo '<link rel="apple-touch-icon" href="' . get_stylesheet_directory_uri() . '/assets/favicons/apple-touch-icon.png">';
}
add_action("wp_head", "mzu_custom_favicon");

この方法により、WordPressの自動圧縮が品質に干渉することなく、あなたのfaviconが意図した通りに提供されることが保証されます。

避けるべきよくある落とし穴

私は何百ものWordPressサイトを監査してきましたが、最も頻繁に目にする3つの間違いは以下の通りです。

• 512pxルールを無視する： WordPressはこの大きなサイズを使ってモバイルデバイス用のアイコンを生成します。16x16のファイルをアップロードすると、モバイルの「ホーム画面に追加」アイコンはピクセルが荒れた悲惨な見た目になります。
• 透明度を忘れる： ブランドカラーが単色の四角でない限り、透明なPNGやSVGを使用してください。円形のロゴの周りに白いボックスがあると、ダークモードのブラウザタブで素人っぽく見えます。
• ダークモードを確認しない： ロゴが黒い場合、Chromeのダークモードでは消えてしまいます。細い白い線を追加するか、メディアクエリを使ったSVGの使用を検討してください。

WordPressのfaviconを設定するのは5分程度の作業ですが、サイトの品質に対する印象に大きな影響を与えます。組み込みのサイトアイコンツールを使うにせよ、より詳細な制御のためにハードコーディングするにせよ、アセットが鮮明で正しいサイズであることを確認してください。もしロゴを適切なフォーマットに変換する必要がある場合は、Mzu favicondlを使って正しく作業を完了させましょう。