気のみ気のままなブログ

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　の場合、キャッシュをクリアする必要があります。
　もしくは一度、お気に入り登録をしてみてください。

投稿者：ひょっとこ弥太郎｜21:01 ｜ブログ・制作Tip！

▲UP

2012年10月31日