www.wanichan.com

Web > Resources > CSS & JavaScript Tips > その他Tips > お気に入りに追加したときのアイコンを指定するには?

お気に入りに追加したときのアイコンを指定するには?

お気に入りに追加した時のアイコンを指定するには、favicon.ico を作成してサイト直下に配置するとOKです。

はじめに

お気に入りに追加すると、なぜかではなく、オリジナルのアイコンになっている場合があります。
私のサイトも一応、オリジナルのアイコンに設定しています(^_^;)

では、どのようにすればいいのでしょうか?

ここでは、アイコンファイルを用意して、お気に入りに追加したらそのアイコンに適用するように設定する方法を紹介します。

▲Page TOP

アイコンファイルを用意する

まず、アイコンファイルを作成する必要があります。
大きさは縦32ピクセル、横32ピクセルでいいのですが、縦16ピクセル、横16ピクセルの大きさの方がきれいに表示できるかもしれません。

アイコンファイルとは、拡張子が .ico となっているものです。
アイコンファイルはちょっと特殊なファイルですので、一般の画像エディタではアイコンファイルを作ることはできません。

荒業として、Windowsのペイントでビットマップ画像を作成して、ビットマップファイルなのに強引に拡張子を .bmp から .ico と名前を変更したら、一応(笑)・・・Windows上ではアイコンファイルとして認識します。
ただし! これは正規アイコンファイルではありません。ビットマップ形式のデータですから。

正規アイコンファイルを作ることのできるエディタは以下の通りです。

  • IfranView 32(日本語版) : 俺のページ
    (フリーウエアのマルチメディアビューアー:透過サポートしていません)
  • KH IconStudio (by KH Software Factory) :http://www.khsoft.gr.jp/
    (アイコン・カーソルのシェアウェアのエディタ(1000円より):透過サポートしています)

アイコンを作成したら、ファイル名は favicon.ico としてください。
そのアイコンファイルをサーバのルートディレクトリにアップロードすればOKです。

▲Page TOP

お気に入りに追加したらそのアイコンに適用するように設定する

たとえ favicon.ico というファイルをサーバに転送しても、反映されない場合があります。
例えば、プロバイダから提供されている会員ホームページスペースは無理です。ドメインを取得さえできればOKなのですが。

では、反映させるようにするには、どうしたらいいでしょうか?

まず、反映させたいHTMLファイルに記述を追加してください。

<head>と</head>の間に以下の記述をすると、めでたく反映されます。

<link rel="SHORTCUT ICON" href="アイコンファイルへのパス">
スポンサーリンク
INDEX
  • このエントリーをはてなブックマークに追加

コメント

▲このページのトップへ