WordPressにファビコンを設定する3つの方法
WordPressにファビコンを設定する3つの方法をご紹介します。
管理画面から設定する
WordPress 6.5以降では、以下の手順で設定できます。
管理画面「設定 > 一般設定」より、
「サイトアイコンを選択」をクリックし、512px × 512px以上の画像をアップロードします。
「変更を保存」をクリックして完了です。
クラシックテーマ、ブロックテーマいずれでも同様に設定可能です。
設定後のソースコード例:
プラグイン「Favicon Rotator」を使用する
ファビコンとAppleタッチアイコン*を別々の画像に設定したい場合に便利です。
*Appleタッチアイコン:iosホーム画面追加時に表示されるアイコン
設定方法
プラグイン「Favicon Rotator」をインストール・有効化します。
有効化後、左メニューの「外観」内に「Favicon」メニューが追加されるのでクリックします。
Browser Icon/strong> 横の [Add Icon] からファビコン画像を設定、
Touch Icon/strong> 横の [Set Icon] からタッチアイコン画像を設定します。
「変更を保存<」をクリックして完了です。
設定後のソースコード例:
header.phpに手動で設定する
テーマファイルの編集に慣れている開発者向けです。
FTPソフトを使用し、以下の画像をルートディレクトリまたはテーマディレクトリ内にアップロードします。
- ・favicon.ico
- ・apple-touch-icon.png
- ・touch-icon.png
次に、テーマディレクトリ内のheader.phpに以下のコードを追記します。
// 画像をルートディレクトリにアップした場合の例
1 2 3 4 |
<link rel="shortcut icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico" type="image/x-icon"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="icon" type="image/png" href="/touch-icon.png"> |
// 画像をテーマディレクトリ/images/にアップした場合の例
1 2 3 4 |
<link rel="shortcut icon" href="/favicon.ico"> <link rel="icon" href="<?php echo get_template_directory_uri(); ?>/images/favicon.ico" type="image/x-icon"> <link rel="apple-touch-icon" href="<?php echo get_template_directory_uri(); ?>/images/apple-touch-icon.png"> <link rel="icon" type="image/png" href="<?php echo get_template_directory_uri(); ?>/images/touch-icon.png"> |
1行目:ファビコン(古いブラウザ互換用)を指定
2行目:ファビコン(ブラウザのタブ・ブックマーク用)を指定
3行目:Appleタッチアイコン(iosホーム画面追加時に表示されるアイコン)を指定
4行目:PNG形式のファビコン(ブラウザのタブ、ブックマーク用、モダンブラウザ向け)