ファビコン(favicon)についてのページです。ファビコンとはブラウザのアドレスバーの横に出たりお気に入りに登録した時に表示される小さなアイコンのことです。

ファビコン設置

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」の使い方はこちらのサイトがお勧めです!

Inkscaper

「Photoshop」をお持ちの方

Photoshopで直接ファビコンを作成することができるプラグインです。ご自分のPC環境に合ったものをダウンロードします。
【Free plugins for Photoshop】


Step2 画像のファイル形式を「ico」に変更する

変換ツールを使って、ico形式へ変換します。作成した画像をファビコン用の形式に変換します。ファイル形式の変換は、次のサイトで行うことができます。

透過する部分がなければ、下記のサイトで変換できます。

  • 今回はこの画像を変換してみます ⇒ ファビコン見本

1.「 FavIcon from Pics」のサイトへGo!赤枠の参照をクリックして画像の場所を開きます。
ico形式へ変換1

2. 元になる画像(赤枠)を選択して開くをクリック
ico形式へ変換2

3. 赤枠の「Generate FavIcon.ico」をクリックするとファビコンが生成されます。
ico形式へ変換3

4. アドレスバーの表示見本が出来ます。アニメーションと両方表示されます。それでよければ赤枠をクリックしてダウンロードしましょう!「Customize」はダウンロードしたいファイルを選択できますので、どちらかでダウンロードしましょう!
ico形式へ変換4

5. IEとFirefoxなどブラウザによって解凍・保存手順が違いますのでそれぞれの手順によって画像を任意の場所へ保存します。
ico形式へ変換5

6. 今回はデスクトップに保存しました。
ico形式へ変換6

7. ブラウザによってこの画面は違ったりします。
ico形式へ変換7

8. ファイルを開くとファビコンがこのように保存されています。
ico形式へ変換8

以上でファビコンファイル(favicon.ico)の完成です!


透過する部分がある場合

【@icon変換】というフリーソフトがお薦めです。インストーラーでインストールする方法もありますが、ZIP圧縮を解凍するとファイル・フォルダができますのでその中にある「ショートカット・アイコン」をダブルクリックするだけで起動します。要らなくなればファイルごと削除すればいいのでお勧めです。こちらのダウンロードがお勧めです!⇒【version 1.21 (ZIP) 】

@icon変換

  • @icon変換インストール
    • 【@icon変換】のサイトに行くと下の方にダウンロードの場所があります。番はインストーラーのダウンロードができますが、最初にも書きましたがお勧めは番です。赤枠をクリックします。
      【@icon変換】インストール
  • 次に、「ファイルを保存する」にチェックが入っているのを確認しOKボタンをクリックします。
    【@icon変換】インストール
  • 圧縮されたファイルが保存されましたので、ダブルクリックで解凍します。
    【@icon変換】インストール
  • 解凍されたファイルです。赤枠のショートカットアイコンで起動させます。
    【@icon変換】インストール


  • @icon変換での変換のしかた
  • 解凍されたファイルの中のショートカットアイコンで【@icon変換】を起動します。
  • 「ファイル」⇒「素材を開く」でファイルを開きます。ファイルをウィンドウにドラッグしてもOKです。
    @icon変換で変換
  • 変換したい画像をクリックで選択し、開くをクリックします。
    @icon変換で変換
  • このようになります。
    @icon変換で変換
  • 「透過マスクの編集」で透明マスクの編集画面を開きます。
    @icon変換で変換
  • このような画面が現れますので、プレビューにチェックを入れて、スポイトツールを選択します。
    @icon変換で変換
  • 左上の背景を少し消しています。
    @icon変換で変換
  • 背景を全部消して透過できたのでOKボタンをクリックします。
    @icon変換で変換
  • 元の画面に戻り背景が透過されているのが確認できます。
    @icon変換で変換

透過する部分がない場合は、ここは不要です。元々透過処理されている画像もここは不要です。ここの処理をしなくても透過されたfavicon.icoが出来ます。

  • 「ファイル」⇒「単独iconとして保存」でファイル名と保存場所を指定して保存します。
    @icon変換で変換
  • ファイル名は推奨ファイル名 「favicon.ico」としましょう!
    @icon変換で変換

「 FavIcon from Pics」では大きな画像でも32×32pxに縮小してファビコンファイルを作ってくれますが、「@icon変換」は大きな画像はそのままのサイズで変換されますので元になる画像は32×32pxに縮小してから変換しましょう!

推奨ファイル名 「favicon.ico」


Step3 FTPソフトでファイルをアップロードする

ファビコンを設置したいサイトのいちばん上の階層 に、ファイルをアップロードします。具体的な場所は、「attach」「backup」「cache」「counter」「diff」これらのフォルダ・ファイルと同じ場所になります。

下記はフリーソフトFFFTPソフトを使っての説明です。

  • FTPソフトを起動させ、赤枠をクリックしてファビコン画像を指定する。
    FTPソフト起動
  • 赤枠をクリック
    ファビコン画像の指定1
  • ファビコン画像があるフォルダを選択してOKボタンをクリック
    ファビコン画像の指定2
  • 赤枠のOKボタンをクリック
    ファビコン画像の指定3
  • ファビコンファイル(favicon.ico)を選択して赤枠のアップロード矢印をクリック!
    ファビコン画像の指定4
  • 現在ファビコンファイルがあればこのような上書き画面が出ますので上書きにチェックが入っているのを確認してOKボタンをクリック!元々ファイルがなければこの画面はありません。
    ファビコン画像の指定5
  • ファビコン(favicon.ico)が、サーバー側にアップされました!
    ファビコン画像の指定6

以上で完了です!お疲れ様でした~(^^ゞ

設置例

【FavIcon from Pics】で変換
【FavIcon from Pics】で変換したファビコン
背景が透過されていません。

【@icon変換】で変換
@icon変換】で変換したファビコン
背景が透過されています。


設置したファビコンが表示されないとき

  1. ブラウザの更新ボタンを押してサイトを最新の状態にする。
    Ctrl(コントロールボタン)とF5(ファンクションキー5)を同時押しすることで、最新の状態のホームページを見ることができます。
  2. 高速化のためのキャッシュの初期化を実行してみる
    QHM設定画面の、【高速化設定、キャッシュの初期化】からキャッシュの初期化を実行する。
    高速化設定(キャッシュ機能の有効化)をしていなければこの作業は必要ありません。
  3. テンプレートキャッシュの初期化を実行してみる
    QHM設定画面の、【高速化設定、キャッシュの初期化】から【テンプレートキャッシュの初期化】を実施してテンプレートキャッシュを削除します。削除を行うことで、ページ全体のレイアウトを再構築できます。
  4. ブラウザの履歴や一時ファイルを削除する。
    Firefoxなら、ツール⇒最近の履歴を消去
    IEなら「ツール」⇒「インターネットオプション」⇒「インターネット一時ファイルの削除」「閲覧の履歴の削除」「お気に入りWebサイトデータの削除」などをしてから、再度お気に入りに登録して確認してみて下さい。
  5. ブラウザの再起動
  6. パソコンの再起動

ご意見をお聞かせください。

  • このページは参考になりましたか?
    選択肢 投票
    参考になった 31  
    もっと詳しく 10  
    分かりにくかった 5  


A:6246 T:2 Y:0