2012年10月31日
Favicon（ファビコン）の設置方法
ホームページをお持ちの方向けの Tip! です
Favicon（ファビコン）とは、ウェブサイトやウェブページに関連付けられたアイコンのことで、Favorite icon（フェイバリット・アイコン）という英語を略した造語です。
favicon を設置することにより、ウェブブラウザの URL 欄、お気に入りのサイト名の左側に表示、ショートカットをデスクトップに保存すると表示が換わります。
他サイトとの差別化、インパクト効果を上げることが期待できます。
IEブラウザー上では、
デスクトップ上では、
と表示されます。
【favicon用の画像を作る】
32px×32px と 16px×16px の画像を用意します。
はじめからこの大きさで作成すると変換後の表示も綺麗になります。
少し大きめに作成し縮小した画像は、ボケた感じになり易いので気をつけて作成してください。
画像は、jpg や gif、png、bmp などで保存します。
ファイル名は適当に付けてかまいません。
ここでは、 32px×32px の画像を 「img-32.bmp」、 16px×16px の画像を 「img-16.bmp」 として保存します。
画像編集ソフトをお持ちで無い方は、 Windows のペイントでも十分対応可能です。
【画像をfaviconに変換】
弥太郎は、画像変換に @icon変換 を利用しているのでこのやり方で紹介します。
@icon変換では、 bmp ファイルで保存することをお勧めします。
@icon変換を保存し、起動すると以下の画面が表示されます。
次に用意した画像を A の位置にドラッグします。
2つの画像をマウスで選択して、アクティブにします。
上手くできないときには、まず img-32.bmp をクリックして、Ctrlキーを押しながら、img-16.bmp をクリックしてください。
変換ファイルを保存をする際は、「ファイル」→「マルチiconとして保存」を選択して保存します。
この時のファイル名は自由ですが、ここでは 「favicon.ico」 で保存します。
【ファイルのアップロード】
Favion を表示させたいページの <head> タグの中に下記のタグを挿入します。
<link rel="shortcut icon" href="ファビコンまでのパス/favicon.ico">
<例>
/home
├index.html
├bbs
│ └bbs.html
└favicon.ico
上記のようなファイル構造のときは index.html に
<link rel="shortcut icon" href="favicon.ico" >
bbs.htmlに表示させたいときは、
<link rel="shortcut icon" href="../favicon.ico" >を挿入してください。
ファイルの準備ができたら、ページファイルと Favion ファイルを FTP でアップロードします。
表示確認してみて、上手く表示できない場合には "ファビコンまでのパス" を絶対パスに変更してみてください。
※Favicon は、ディレクトリ毎に設置は可能ですが、 IE などでは不安定な動作のため推奨はできません。
※一部のサーバでは動作しない場合があります。
※Windows IE の場合、キャッシュをクリアする必要があります。
もしくは一度、お気に入り登録をしてみてください。
Favicon（ファビコン）とは、ウェブサイトやウェブページに関連付けられたアイコンのことで、Favorite icon（フェイバリット・アイコン）という英語を略した造語です。
favicon を設置することにより、ウェブブラウザの URL 欄、お気に入りのサイト名の左側に表示、ショートカットをデスクトップに保存すると表示が換わります。
他サイトとの差別化、インパクト効果を上げることが期待できます。
IEブラウザー上では、
デスクトップ上では、
と表示されます。
【favicon用の画像を作る】
32px×32px と 16px×16px の画像を用意します。
はじめからこの大きさで作成すると変換後の表示も綺麗になります。
少し大きめに作成し縮小した画像は、ボケた感じになり易いので気をつけて作成してください。
画像は、jpg や gif、png、bmp などで保存します。
ファイル名は適当に付けてかまいません。
ここでは、 32px×32px の画像を 「img-32.bmp」、 16px×16px の画像を 「img-16.bmp」 として保存します。
画像編集ソフトをお持ちで無い方は、 Windows のペイントでも十分対応可能です。
【画像をfaviconに変換】
弥太郎は、画像変換に @icon変換 を利用しているのでこのやり方で紹介します。
@icon変換では、 bmp ファイルで保存することをお勧めします。
@icon変換を保存し、起動すると以下の画面が表示されます。
次に用意した画像を A の位置にドラッグします。
2つの画像をマウスで選択して、アクティブにします。
上手くできないときには、まず img-32.bmp をクリックして、Ctrlキーを押しながら、img-16.bmp をクリックしてください。
変換ファイルを保存をする際は、「ファイル」→「マルチiconとして保存」を選択して保存します。
この時のファイル名は自由ですが、ここでは 「favicon.ico」 で保存します。
【ファイルのアップロード】
Favion を表示させたいページの <head> タグの中に下記のタグを挿入します。
<link rel="shortcut icon" href="ファビコンまでのパス/favicon.ico">
<例>
/home
├index.html
├bbs
│ └bbs.html
└favicon.ico
上記のようなファイル構造のときは index.html に
<link rel="shortcut icon" href="favicon.ico" >
bbs.htmlに表示させたいときは、
<link rel="shortcut icon" href="../favicon.ico" >を挿入してください。
ファイルの準備ができたら、ページファイルと Favion ファイルを FTP でアップロードします。
表示確認してみて、上手く表示できない場合には "ファビコンまでのパス" を絶対パスに変更してみてください。
※Favicon は、ディレクトリ毎に設置は可能ですが、 IE などでは不安定な動作のため推奨はできません。
※一部のサーバでは動作しない場合があります。
※Windows IE の場合、キャッシュをクリアする必要があります。
もしくは一度、お気に入り登録をしてみてください。
投稿者：ひょっとこ弥太郎｜21:01
｜ブログ・制作Tip！
雑 談 (438)
