サイトアイコン（ファビコン）とは、Webブラウザのアドレス欄や、タブの端、ブックマークの先頭などに表示されるWebサイトのアイコンのことです。
サイトアイコンを設定しておけば、Webサイトを素早く見分けることができるので、Webサイトを運営するのであれば必ず設定しておきたい項目といえます。
そこでここでは、WordPress製のWebサイトを例に、サイトアイコンの作成方法やサイトアイコンを設置する方法を紹介します。
サイトアイコンを作成する
サイトアイコンは、表示される場所によってサイズが異なるため、以下のように複数サイズのアイコンを、ico形式やPNG形式の画像ファイルとして用意しておくのが一般的ですが、WordPress4.3以降では「512ｘ512」サイズのPNG形式ファイルのみ作成しておけば全てに対応してくれるようになっています。
- ブラウザのアドレス欄やタブでは「16×16」サイズ
- デスクトップ上のショートカットでは「32×32」サイズ
- Windowsでタスクバーにピン留めした場合は「24×24」サイズ
- スマートフォンのホーム画面の場合は「192ｘ192」サイズ
サイトアイコンを設置する
WordPressでサイトアイコンを設置するには、「管理画面」＞「外観」＞「カスタマイズ」＞「サイト基本情報」メニューから設定できます。
WordPress4.3以前での設置方法
ちなみにですが、WordPress4.3以前では、上の設定項目がなかったため、次の手順でfunctions.phpにコードを追記する必要がありました。
まず、スタイルシートと同じ階層に、アイコン形式ファイルとPNG形式ファイルをアップロードします。（子テーマがある場合は子テーマのスタイルシートと同じ階層に）
つぎに、functions.phpに以下を追記します。（子テーマがある場合は、子テーマのfunctions.phpに）
※ここでは、例としてアイコン形式ファイルを「favicon.ico」、PNG形式ファイルを「webclip.png」としています。
// favicon表示
function add_faviicon(){
echo '<link rel="shortcut icon" href="'.get_stylesheet_directory_uri().'/favicon.ico" />';
echo '<link rel="apple-touch-icon-precomposed" href="'.get_stylesheet_directory_uri().'/webclip.png" />';
}
add_action('wp_head', 'add_favicon');
// favicon表示(管理画面)
function add_admin_favicon() {
echo '<link rel="shortcut icon" href="'.get_stylesheet_directory_uri().'/favicon.ico" />';
}
add_action('admin_head', 'add_admin_favicon');以上で、Webブラウザにサイトアイコンが表示されるようになります。