WEBサイトを運営しているほとんどの方が、ファビコンは設置していると思います。
ファビコンはブックマークした時にもサイト名の横に表示されるので、設定しておいた方が数あるブックマークの中から見つけてもらいやすくなりますね。
WordPressでファビコンを設置する場合も通常のWEBサイトと同じようにやります。
ファビコンとは
WEBサイトを開いた時に、ブラウザのタブとかURLの横に表示されるアイコンのことです。そのサイトを象徴するようなアイコンを設定するのが基本です。
当ブログだと、以下のような感じですね。
ファビコン用の画像を用意する
まずは、ファビコン用の画像を用意しましょう。画像のサイズは 16px × 16px になりますが、画像作成時点では 32px × 32ｐｘ とかでも構いません。
画像を用意したら、アイコン画像(favicon.ico)に変換します。変換サービスは「Favicon Converter」が便利です。
WordPressにファビコンを設置する
まずはファビコン画像をサーバーにアップロードします。使っているテーマのフォルダ（wp-content/themes/[テーマ名]/images/）にアップロードしましょう。
ファビコンを表示させる方法については、2パターン紹介します。
header.phpを編集する
1つ目は、使用しているテーマのheader.phpに直接記述する方法です。header.phpの<head>～</head>内に以下のコードを入力します。
1 | <link rel="shortcut icon" type="image/vnd.microsoft.icon" href="<?php bloginfo('template_directory'); ?>/images/favicon.ico"> |
これでファビコンが表示されるようになります。
functions.phpを編集する
もう1つは、functions.phpにコードを記述する方法です。
1 2 3 4 | function my_favicon() { echo "\n".'<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="'.get_bloginfo('template_url').'/images/favicon.ico" />'."\n";}add_action('wp_head', 'my_favicon'); |
上記のようなコードを追加することで、head内にファビコン用のタグが追加されます。
favicon.icoの場所が違う場合は、パスを変更してください。
管理画面でもファビコンを表示させる
functions.phpにコードを追加すれば、管理画面でもファビコンを表示させることができます。
1 2 3 4 | function admin_favicon() { echo '<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="'.get_bloginfo('template_url').'/images/favicon.ico" />'."\n";}add_action('admin_head', 'admin_favicon'); |
このように記述すれば、管理画面でもファビコンが表示されます。サイト閲覧時と管理画面のファビコンを違うものにして、開いているページをわかりやすくするのもいいですね。
あとがき
header.phpとfunctions.phpのどちらに記述するかは、お好みで決めましょう。
functions.phpに書いた方が、wp_head関数に追加される形になるし、管理画面でも表示させられるのでおすすめです。