MENU

Favicon(ファビコン)、Icon(アイコン)の設定方法

Favicon設定後
  • URLをコピーしました!

ブログを作ったものの、Faviconの設定をしてませんでした。
そこで、Faviconの設定がてら、手順をまとめました。

前段階として、Favicon(ファビコン)とは何ぞや?という私のような方の為に、以下Wikipediaの引用です。

Favicon(ファビコン)はウェブサイトやウェブページに関連付けられたアイコンのことである。Favorite icon(フェイバリット・アイコン)という英語の語句を縮約したものである。

ちなみに、

ファイル名の決まりは特にない。また、ファイル形式の決まりもなく、ウェブブラウザが認識する形式であればどのようなフォーマットを用いても良い。ただし、Internet ExplorerはICO形式しか認識しない。

ということ。は?IE以外は、ICO形式以外にもGIF形式(16×16サイズ 256色)かPNG形式(16×16サイズで8ビット形式(256色)ないし24ビット形式)でもいいみたいです。

と、いう能書きは置いておいて…、今回は既にICO形式のファイルを用意してしまってるので、ICO前提で進みます。ICO形式の作成方法については、別途の流れでまとめたいと思います。

現時点では、何の設定もしてませんので、
Favicon設定前
こんな感じです。

設定方法ですが、以下の通りです。

まずは、アイコン画像をアップロードします。
私の場合は、デフォルトの「Twenty Ten」のテンプレートを使用しているため、
アップロード場所は、”/wp-content/themes/twentyten/images”です。

次に、header.phpの編集です。
header.php の<head> </head>の間の部分に以下のコードを挿入します。

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

私の場合は、header.phpの</head>の直前にこんな感じで挿入してみました。

	wp_head();

<!-- //faviconの設定 -->
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/images/favicon.ico" />

</head>

と記述しました。

Favicon設定後

イイカンジに仕上がったでしょう?

よかったらシェアしてね!
  • URLをコピーしました!
目次