WordPressサイトアイコン設定の正解——512px正方形PNGの作り方と失敗パターン
WordPressには標準で「サイトアイコン」機能が組み込まれており、512×512px以上の正方形PNGをアップロードするだけで、ブラウザのタブに表示されるfavicon.icoから、iPhoneホーム画面に追加した時のapple-touch-iconまで、必要なサイズを内部で自動生成します。WordPress公式の「サイトアイコン」仕様と、現場でよく見る失敗パターンを整理します。
WordPress公式サイトアイコン機能の場所
設定場所は「外観 → カスタマイズ → サイト基本情報 → サイトアイコン」（WordPress 4.3以降の標準機能）。あるいはブロックテーマ（WordPress 5.9以降）では「設定 → 一般 → サイトアイコン」から設定します。アップロード可能な画像形式はPNG・JPG・GIF・ICOです。
WordPress公式ドキュメント（WordPress Documentation）の説明によれば、サイトアイコンは512×512px以上の正方形画像が推奨されています。アップロードした画像はWordPressが内部で複数の解像度（16, 32, 180, 270pxなど）にリサイズし、HTMLの<head>に必要な<link>タグを自動的に挿入します。
推奨サイズ・形式の根拠
512px推奨の理由は、WordPressが内部で生成する最大解像度がicon-512.pngで、これはAndroid Chromeのホーム画面追加時に使われる「Web App Manifest icons」推奨サイズと一致するためです。元画像を512×512px未満で渡すと、180pxのapple-touch-iconが拡大処理されて画質が落ちます。逆に1024×1024pxや2048×2048pxで渡しても、WordPress側は512pxに統一して保管するので、特に画質的メリットはありません。
形式はPNGが最も安全。JPGも受け付けますが、JPGは透過が使えず、低解像度のタブアイコンでは劣化が目立ちます。GIFは複数フレームに対応していますが、ファビコンとしては1フレーム目だけが使われます。ICOファイルを直接アップロードする道もありますが、WordPress側で再生成されるため、わざわざ手動生成する意味は薄いです。
正方形でない画像でアップロードしたときの動作
WordPressは正方形でない画像をアップロードすると、設定画面で「画像のトリミング」を求めます。マウスでクリッピング範囲を指定するUIが表示され、好きな矩形を選んでサイトアイコンに使う部分を確定できます。トリミング後は自動的に512×512pxに正規化されます。
ただしクリッピングUIは細かい調整が苦手です。1px単位のズレを許せない用途では、事前に画像トリミングで512×512px正方形に整えてから渡すのが確実です。
よくある失敗パターン5選
- 1. 元画像が小さすぎる：100×100pxの画像をアップロード→180pxのapple-touch-iconが拡大処理されてぼやける。512px以上で用意してください。
- 2. ロゴに細かい文字が入っている：「株式会社○○」などの社名フルバージョンをアップロード→16pxのタブアイコンでは文字が潰れて読めない。シンボルマークだけにするのが正解です。
- 3. 透過PNGでiOSが黒抜きに：背景透過のPNGをアップロード→iPhoneのホーム画面追加時にapple-touch-iconの透明部分が黒で塗りつぶされる。背景は白などの不透明色にしてください。
- 4. キャッシュで反映されないように見える：設定変更後、ブラウザのファビコンキャッシュが残って古い画像が表示される。シークレットウィンドウで確認するか、Ctrl+Shift+Rで強制リロードを試してください。
- 5. テーマが独自にfaviconを上書き：一部の有料テーマは独自にfaviconを設定する機能を持ち、WordPress標準のサイトアイコン設定を上書きします。テーマカスタマイザーの「テーマ設定」も併せて確認してください。
REST API・wp-cli経由での設定
管理画面UIではなくREST APIから設定したい場合は、POST /wp/v2/settingsにsite_iconパラメータでメディアIDを送ります。事前にPOST /wp/v2/mediaで画像をアップロードしてメディアIDを取得し、それをsite_iconとして割り当てる流れです。
wp-cliからはwp option update site_icon <attachment_id>で設定できます。マルチサイト管理や、コーディング自動化スクリプトで便利です。
WordPress外（自作HTML・Shopify・STUDIO）で本ツールが必要になる
WordPress外のサイト——自作HTMLサイト、Shopify、BASE、STORES、STUDIO、Wix、Jimdoなど——では、ファビコンを手動で配置する必要があります。これらのサービスはサイトアイコン設定欄が独自仕様で、「正方形PNGをアップロード」という形が多いですが、サービスによって受け入れサイズが異なります（Shopify 32px、STUDIO 512px、Wix 専用Editorなど）。
手軽屋のファビコン作成は、こうしたWordPress外の用途で、必要なサイズ一式をZIPで吐き出します。自作HTMLサイトの<head>に挿入する<link>タグもZIP同梱の「使い方.txt」に書かれています。
ファビコン作成ツール → /favicon/
本記事はWordPress公式ドキュメント「Site Icon」、HTML Living Standard rel=icon仕様、MDN Web App Manifest iconsを参照しています。