2013.02.05 (Tue)
■ファビコンとは？
ファビコン(Favicon)とは、Webブラウザのアドレスバーやタブに表示されるアイコンのことです。
下の画像は、IEでの表示例ですが…
URLやタブの左側に、Googleの「g」の画像が表示されていますね。
色々なサイトで、ロゴマークやキャラクターのアイコンが表示されているのを、目にしたことはありませんか？
ファビコンは、初歩的な画像作成とhtmlの知識があれば、案外簡単に設定ができます。
だからなんだ、という話でもあるのですが、個性をアピールできる部分でもあるので、独自のファビコンが設定されていると、ブログやサイトのイメージが変わったりもします。
また、ブックマーク時にもファビコンが表示されますので、
他のサイトと区別しやすくなるのも、メリットの一つです。
当ブログも、最初はFC2のユニコーンが表示されていました。
これを他の画像に変更しつつ、その過程を記事にしておこうと思います。
■ファビコンの作り方
ファビコンとして使用する画像は、下記の形式である必要があります。
画像のサイズは、16×16ピクセル。
画像の種類は、ICO形式。
ICOって何？という方もいらっしゃると思いますが、普段は使用しない形式ですので、知らなくて当然です。
まずは、gifやjpg、png形式の画像を用意して下さい。
これを、後でICO形式に変換します。
PCに最初からインストールされている、簡単なペイントソフトでも作成できると思います。
縦16ピクセル、横16ピクセルのサイズで画像を作成し、gifやpng形式で、保存しましょう。
ちなみに当ブログでは、こんな感じの画像を用意しました。
特に意味はありませんが、レトロなRPGに登場しそうな宝箱のgif画像です。
以前は変換ソフトを使用していましたが、今はWeb上でICO形式に変換してくれるサイトがあります。
・ファビコン作成。favicon.ico 無料で透過マルチアイコンが作れます。
当ブログでもお世話になりました。
ページ左側の「小画像(16×16)」から画像を選択して、「favicon.ico作成」ボタンを押しましょう。
変換が成功すれば、ファイルをダウンロードできます。
ペイント関連のソフトが一切ない方、ソフトを開くのが面倒だ、という方はこちら。
・Favicon Editor
英語サイトですが、Web上で、直感的にドットを打つことができます。
画面右下の「Create Favicon」ボタンを押すと、ダウンロード画面へ移ります。
ICO形式のファイルを用意できた方は、次に進みましょう。
※実は、16ピクセル以外のサイズや、ブラウザによってはICO形式以外も設定できるのですが、基本に沿った方法ということで、省略しています。
■ファビコンの設定方法
用意したICOファイルを、自分のブログやサイトにアップロードして下さい。
次に、ファビコンを設定するためのタグをhtmlに追加します。
追加するタグは、下記の形式になります。
<link rel="shortcut icon" href="xxx.ico" type="image/vnd.microsoft.icon" />
※くれぐれも、このままコピペしないで下さい。
赤字のxxx.ico部分を、先程アップロードした自分のサイトのURLと画像のファイル名に置き換える必要があります。
タグの追加位置は、<head>から</head>の間です。
よく分からない方は、</head>の上の行に追加して下さい。
かなり単純化しましたが、以下のような形になるものと思います。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>サイト名・ブログ名</title>
<link rel="shortcut icon" href="xxx.ico" type="image/vnd.microsoft.icon" />
</head>
<body>
■FC2 BLOGの場合
大変申し訳ないのですが、FC2ブログ限定の説明です。
アップロードした画像ファイルの、URLの探し方です。
アップロードができたのであれば問題ないと思いますが、管理画面の左側、「ホーム」の「ファイルアップロード」をクリックすると、ファイル一覧を見ることができます。
先程アップした、ファビコンのファイルを探しましょう。
ICO形式のため、一覧にサムネイルが表示れない場合があります。
ここで、ファイルを確認すると、
http://blog-imgs-xx.fc2.com/x/x/x/xxxxxxxx/xxx.ico
という様なURLを見ることができると思います。
このURLを、ファビコン用のlinkタグ内、href="xxx.ico"の部分に記述して下さい。
次に「環境設定」の「テンプレートの設定」をクリックして、HTML編集の画面に移動します。
この画面で、テンプレートにタグを追加します。
編集作業に不安な方は、念のため、一度テンプレートを複製して、バックアップを取っておいた方が良いと思います。
HTML編集画面から</head>の部分を探し出しましょう。
ソース全体から見ると、かなり上の方に記述されているはずです。
上記の『ファビコンの設定方法』の通りにファビコン用のlinkタグを追加し、テンプレートの「更新」ボタンを押して下さい。
以上で設定は完了です。
■Webブラウザで確認
ファビコンは無事に表示されたでしょうか？
設定が完了しても、すぐに反映されない場合もあります。
ファビコンに変化がない時は、まずhtmlを見直し、ブラウザのキャッシュをクリアする、ブラウザを再起動する、一定時間後にアクセスする、等で確かめてみましょう。
- 関連記事
-
- 画像の形式・GIFとJPGの違い、それぞれの使い分け[初心者向け] (2013/05/16)
- ファビコンとは？ファビコンの作り方と設定方法 [初心者向け] (2013/02/05)
