ファビコン設置
Top / QHMReferenceBook / favicon
ファビコンを設置してみよう！
ファビコン（favicon）とはWebブラウザのアドレスバーの横に出たり、お気に入りに登録した時に表示される小さなアイコンのことです。
ブラウザによっては対応していないものもあり、ファビコンというもの自体が不安定みたいですが、お気に入りに登録した時などにも表示されて目的のサイトを探すのにも便利です。小さくて可愛いくてとても気に入っています。
QHMで、オリジナルのfaviconを設置するには、「favicon.ico」 という名前で画像を作成し、その画像をFTPソフトで、サーバーにアップロードするだけです。
ファイル形式はICOが一般的ですが、GIFやPNGもサポートされてきました。でもIEでは「ico」しかサポートされていないみたいなので「favicon.ico」で画像を作ることをお勧めします。
Step1 ファビコン用の画像を用意する
お持ちのPhotoShopや画像編集ソフトで16×16ピクセル以上の画像を作ります。
サイトをイメージできるロゴやマークがあればそれを元に作ることができればいいですね。実際に作成する画像のサイズは、32×32ピクセルですが実際は16×16ピクセルで表示されます。作業をする際は広いカンパスの方がデザインしやすいので、その倍にあたる 64×64ピクセルくらいで作成します。最終的には 32×32ピクセルに縮小、実際は16×16ピクセルで表示される事を考えデザインされるといいです。
16×16ピクセルに圧縮して表示されるため、できるだけ小さく、シンプルなデザインの方がよいです。複雑なデザインだと、潰れてよくわからなくなってしまいます。
圧縮されない状態で表示させたい場合は、初めから16×16ピクセルの画像を作ります。
正方形である必要があります。作成した画像は、GIFやPNG形式等で保存しておきます。
大きめの画像でもファビコンに変換することができますが（変換時に自動的に縮小される）、画質が悪くなってしまうようです。
※ファビコンには、アニメーションGIFも使えますがIEではサポートされていないみたいなので説明は省きます。
無料の画像作成ソフト「Inkscape」
「Inkscape」の使い方はこちらのサイトがお勧めです！
「Photoshop」をお持ちの方
Photoshopで直接ファビコンを作成することができるプラグインです。ご自分のPC環境に合ったものをダウンロードします。
【Free plugins for Photoshop】
Step2 画像のファイル形式を「ico」に変更する
変換ツールを使って、ico形式へ変換します。作成した画像をファビコン用の形式に変換します。ファイル形式の変換は、次のサイトで行うことができます。
透過する部分がなければ、下記のサイトで変換できます。
- 今回はこの画像を変換してみます ⇒
1.「 FavIcon from Pics」のサイトへGo！赤枠の参照をクリックして画像の場所を開きます。
2. 元になる画像（赤枠）を選択して開くをクリック
3. 赤枠の「Generate FavIcon.ico」をクリックするとファビコンが生成されます。
4. アドレスバーの表示見本が出来ます。アニメーションと両方表示されます。それでよければ赤枠をクリックしてダウンロードしましょう！「Customize」はダウンロードしたいファイルを選択できますので、どちらかでダウンロードしましょう！
5. IEとFirefoxなどブラウザによって解凍・保存手順が違いますのでそれぞれの手順によって画像を任意の場所へ保存します。
6. 今回はデスクトップに保存しました。
7. ブラウザによってこの画面は違ったりします。
8. ファイルを開くとファビコンがこのように保存されています。
以上でファビコンファイル（favicon.ico）の完成です！
透過する部分がある場合
【@icon変換】というフリーソフトがお薦めです。インストーラーでインストールする方法もありますが、ZIP圧縮を解凍するとファイル・フォルダができますのでその中にある「ショートカット・アイコン」をダブルクリックするだけで起動します。要らなくなればファイルごと削除すればいいのでお勧めです。こちらのダウンロードがお勧めです！⇒【version 1.21 (ZIP) 】
- @icon変換インストール
- 【@icon変換】のサイトに行くと下の方にダウンロードの場所があります。②番はインストーラーのダウンロードができますが、最初にも書きましたがお勧めは①番です。赤枠をクリックします。
- 【@icon変換】のサイトに行くと下の方にダウンロードの場所があります。②番はインストーラーのダウンロードができますが、最初にも書きましたがお勧めは①番です。赤枠をクリックします。
- 次に、｢ファイルを保存する」にチェックが入っているのを確認しOKボタンをクリックします。
- 圧縮されたファイルが保存されましたので、ダブルクリックで解凍します。
- 解凍されたファイルです。赤枠のショートカットアイコンで起動させます。
- @icon変換での変換のしかた
- 解凍されたファイルの中のショートカットアイコンで【@icon変換】を起動します。
- 「ファイル」⇒「素材を開く」でファイルを開きます。ファイルをウィンドウにドラッグしてもOKです。
- 変換したい画像をクリックで選択し、開くをクリックします。
- このようになります。
- 「透過マスクの編集」で透明マスクの編集画面を開きます。
- このような画面が現れますので、プレビューにチェックを入れて、スポイトツールを選択します。
- 左上の背景を少し消しています。
- 背景を全部消して透過できたのでOKボタンをクリックします。
- 元の画面に戻り背景が透過されているのが確認できます。
※透過する部分がない場合は、ここは不要です。元々透過処理されている画像もここは不要です。ここの処理をしなくても透過されたfavicon.icoが出来ます。
- 「ファイル」⇒「単独iconとして保存」でファイル名と保存場所を指定して保存します。
- ファイル名は推奨ファイル名 「favicon.ico」としましょう！
※「 FavIcon from Pics」では大きな画像でも32×32pxに縮小してファビコンファイルを作ってくれますが、「@icon変換」は大きな画像はそのままのサイズで変換されますので元になる画像は32×32pxに縮小してから変換しましょう！
※ 推奨ファイル名 「favicon.ico」
Step3 FTPソフトでファイルをアップロードする
ファビコンを設置したいサイトのいちばん上の階層 に、ファイルをアップロードします。具体的な場所は、「attach」「backup」「cache」「counter」「diff」これらのフォルダ・ファイルと同じ場所になります。
※下記はフリーソフトFFFTPソフトを使っての説明です。
- FTPソフトを起動させ、赤枠をクリックしてファビコン画像を指定する。
- 赤枠をクリック
- ファビコン画像があるフォルダを選択してOKボタンをクリック
- 赤枠のOKボタンをクリック
- ファビコンファイル（favicon.ico）を選択して赤枠のアップロード矢印をクリック！
- 現在ファビコンファイルがあればこのような上書き画面が出ますので上書きにチェックが入っているのを確認してOKボタンをクリック！元々ファイルがなければこの画面はありません。
- ファビコン（favicon.ico）が、サーバー側にアップされました！
以上で完了です！お疲れ様でした～(^^ゞ
設置例
★【FavIcon from Pics】で変換
背景が透過されていません。
★【@icon変換】で変換
背景が透過されています。
設置したファビコンが表示されないとき
- ブラウザの更新ボタンを押してサイトを最新の状態にする。
Ctrl（コントロールボタン）とF5（ファンクションキー５）を同時押しすることで、最新の状態のホームページを見ることができます。 - 高速化のためのキャッシュの初期化を実行してみる
QHM設定画面の、【高速化設定、キャッシュの初期化】からキャッシュの初期化を実行する。
高速化設定（キャッシュ機能の有効化）をしていなければこの作業は必要ありません。 - テンプレートキャッシュの初期化を実行してみる
QHM設定画面の、【高速化設定、キャッシュの初期化】から【テンプレートキャッシュの初期化】を実施してテンプレートキャッシュを削除します。削除を行うことで、ページ全体のレイアウトを再構築できます。 - ブラウザの履歴や一時ファイルを削除する。
Firefoxなら、ツール⇒最近の履歴を消去
IEなら「ツール」⇒「インターネットオプション」⇒「インターネット一時ファイルの削除」「閲覧の履歴の削除」「お気に入りWebサイトデータの削除」などをしてから、再度お気に入りに登録して確認してみて下さい。 - ブラウザの再起動
- パソコンの再起動
ご意見をお聞かせください。
- このページは参考になりましたか？
A:8455 T:1 Y:2
