WordPress:サイトアイコン(ファビコン)を作成・設置する

サイトアイコン(ファビコン)とは、ブラウザのアドレス欄・タブの端・ブックマーク項目の先頭・デスクトップ上に置くショートカットアイコンに使用されるアイコンのことです。(スマートフォンでは、ホーム画面やブラウザのブックマークに使用されます)

サイトアイコンの設置は、SEOにはそれほど関係がないと思いますが、サイトアイコンが表示されていると、ブラウザなどでウェブサイトかを素早く見分けることができ、クリック率UPには効果があるとも言えます。

ここでは、サイトアイコンの作成からWordPressへの設定方法について紹介します。

サイトアイコンの作成

通常、サイトアイコンは、表示する場所によってサイズが異なるため、複数サイズのアイコンを用意しておきます。例えば、ブラウザのアドレス欄やタブでは「16×16」サイズ、デスクトップ上のショートカットでは「32×32」サイズ、Windowsでタスクバーにピン留めした場合は「24×24」サイズ、スマートフォンのホーム画面の場合は「192x192」サイズなどで、これらの複数サイズのアイコンをico形式やPNG形式の画像ファイルとして準備します。

が、WordPress4.3以降ではサイトアイコンは「512x512」サイズのPNG形式ファイルのみ作成しておけば全てに対応してくれるようになりました。

サイトアイコンの設置

WordPressのバージョン4.3以上では、サイトアイコンの設置が「管理画面」→「外観」→「カスタマイズ」→「サイト基本情報」メニューからできるようになっており(以下の画像をご覧ください)、それ以前のようにfunctions.phpやheader.phpへコードを追記する必要はなくなりました。

WordPress4.3未満での設置例

  1. スタイルシートと同じ階層に、アイコン形式ファイルとPNG形式ファイルをアップロードします。(子テーマがある場合は子テーマのスタイルシートと同じ階層に)
  2. 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');
  3. ブラウザでサイトを再表示(もしくはキャッシュを削除)すれば、サイトアイコンが反映されます。

まとめ

WordPressもどんどん使いやすくなっています。

参考

WordPress Codex 日本語版-favicon の作成