WordPressサイトにファビコン(favicon)を設置する方法

WordPressサイトにファビコン(favicon)を設置する方法

WordPressサイトにファビコン(favicon)を設置する方法

WEBサイトを運営しているほとんどの方が、ファビコンは設置していると思います。

ファビコンはブックマークした時にもサイト名の横に表示されるので、設定しておいた方が数あるブックマークの中から見つけてもらいやすくなりますね。

WordPressでファビコンを設置する場合も通常のWEBサイトと同じようにやります。

ファビコンとは

WEBサイトを開いた時に、ブラウザのタブとかURLの横に表示されるアイコンのことです。そのサイトを象徴するようなアイコンを設定するのが基本です。

当ブログだと、以下のような感じですね。

ファビコン画像

ファビコン用の画像を用意する

まずは、ファビコン用の画像を用意しましょう。画像のサイズは 16px × 16px になりますが、画像作成時点では 32px × 32px とかでも構いません。

画像を用意したら、アイコン画像(favicon.ico)に変換します。変換サービスは「Favicon Converter」が便利です。

WordPressにファビコンを設置する

まずはファビコン画像をサーバーにアップロードします。使っているテーマのフォルダ(wp-content/themes/[テーマ名]/images/)にアップロードしましょう。

ファビコンを表示させる方法については、2パターン紹介します。

header.phpを編集する

1つ目は、使用しているテーマのheader.phpに直接記述する方法です。header.phpの<head>~</head>内に以下のコードを入力します。

<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="<?php bloginfo('template_directory'); ?>/images/favicon.ico">

これでファビコンが表示されるようになります。

functions.phpを編集する

もう1つは、functions.phpにコードを記述する方法です。


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にコードを追加すれば、管理画面でもファビコンを表示させることができます。


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関数に追加される形になるし、管理画面でも表示させられるのでおすすめです。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です