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


WordPressで作成したブログに、ファビコンを設置したいと思います。ファビコンは、あまり聞き慣れない方もいらっしゃるかと思いますが、お気に入り登録時のタイトル横に表示される、小さなアイコンのことです。
それからファビコンのついでに、スマートフォンのウェブクリップアイコンにも対応させようと思います。スマートフォンやiPhoneでは、ホーム画面に置くブックマークアイコンのことを「ウェブクリップ」と呼ぶのですが、そのときのホーム画面で使用されるアイコンの事を「ウェブクリップアイコン」と呼ぶそうです。

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

ファビコンは、原則的にアイコン(ICO)形式のファイルで作成します。画像のサイズは正方形で16×16、32×32、64×64などのバリエーションがあり、一つのファイルに複数のサイズを格納することができるようになっています。ブラウザのアドレスバーやタブに表示されるアイコンは、ほとんどの場合、16×16のサイズとなります。

アイコンのサイズ毎に、それぞれを作っても良いですし、大きめの画像を用意して、だんだんと縮小を適用して作っても良いでしょう。用意した画像からアイコンの作成するためには、ブラウザ上で動作する編集サイトの「X-Icon Editor」をお勧めします。必要なサイズをまとめて保存できますので便利です。
ファビコン

利用しているテーマ内にファビコンをアップロード

作成したアイコンファイルを「favicon.ico」として保存して、サーバーのテーマフォルダにアップロードします。
cp ./favicon.ico /path/to/wordpress/wp-content/themes/

function.php を編集する

function.php を編集し、最後に以下のように追加をします。
function blog_favicon() {
  echo '<link rel="shortcut icon" type="image/x-icon" href="' . get_bloginfo('template_url') . '/favicon.ico" />' . "\n";
}
add_action('wp_head', 'blog_favicon');

ウェブクリップアイコンの設置

何も設定していない場合には、表示しているページのスクリーンショットが縮小されてアイコンとして使用されますが、これもオリジナルの画像に設定してみましょう。ウェブクリップアイコンの画像は、png形式で用意します。あらかじめ大きめの画像を指定しておけば、ウェブクリップとして使われる時に自動的に縮小して使われるようなので、150×150か、200×200程度の大きさの画像を用意しておけば大丈夫です。

ファビコンと同様に、function.php を編集します。同じように最後に以下のような追加を行います。
function blog_webclip() {
  echo '<link rel="apple-touch-icon" href="' . get_bloginfo('template_url') . '/webclip.png" />' . "\n";
}
add_action('wp_head', 'blog_webclip');

こんな感じです。ファビコンやウェブクリップアイコンを設置するのは非常に簡単ですので、是非やってみてください。


コメントを残す

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

ブログ著者情報

KAZ@Apocrypha
KAZ@Apocrypha
備忘録的な話題だけでなく、内容に拘らず情報発信をして行きたいと思っています。よろしくお願いします。
このエントリーをはてなブックマークに追加

カテゴリー