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

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

サイトアイコン(ファビコン)とは、ブラウザのアドレス欄や、タブの端、ブックマークの先頭などに表示されるWebサイトのアイコンのことです。

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

サイトアイコンを設定しておけば、ブラウザなどでウェブサイトを素早く見分けることができるので、Webサイトを運営するのであれば設定しておくことをお勧めします。

そこでここでは、サイトアイコンの作成方法や、WordPressでサイトアイコンを設置する方法を紹介します。

サイトアイコンの作成

通常、サイトアイコンは、表示する場所によってサイズが異なるため、複数サイズのアイコンを、ico形式やPNG形式の画像ファイルとして用意します。

  • ブラウザのアドレス欄やタブでは「16×16」サイズ
  • デスクトップ上のショートカットでは「32×32」サイズ
  • Windowsでタスクバーにピン留めした場合は「24×24」サイズ
  • スマートフォンのホーム画面の場合は「192x192」サイズ

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

サイトアイコンの設置

WordPressでサイトアイコンを設置するには、「管理画面」>「外観」>「カスタマイズ」>「サイト基本情報」メニューから設定できます。

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');

以上で、ブラウザでサイトを再表示(もしくはキャッシュを削除)すれば、サイトアイコンが反映されます。

参考

WordPress Codex 日本語版-favicon の作成

記事が役立ったらシェアしてくれるとうれしいです。

あなたにおすすめのコンテンツ