ファビコンの作り方と設置方法

ファビコンの作り方と設置方法について説明したページです。ファビコンの作り方、ico形式への変換方法、htmlタグでの記述方法等について説明しています。

ファビコンの概要

 ファビコンは下図のように本サイトでもタイトルの左に出ている小さな絵の事です。

ファビコンの作り方と設置方法1

 ファビコンを設置しておくとブックマークされた時に同じようにタイトルの左にファビコンが表示されるようになります。

ファビコンの作り方と設置方法2

ファビコンの作り方

 ファビコンがブラウザで表示される大きさは16px × 16pxです。作り方は様々ですが、画像の作成に慣れていない場合は32px × 32pxで作成し16px × 16pxに縮小した方が作り易いと思います。

 PictBearで作る場合、キャンパスの大きさを32px × 32pxとして新規作成し、画像を作った後にイメージタイプをインデックスカラーに変換してgif形式で保存します。

 絵は苦手という方でも文字を挿入出来るため、フォントの種類と大きさを選んで配置するだけで簡単に出来ます。

ファビコンの作り方と設置方法3

 PictBearの使い方は「PictBearの使い方」をご参照下さい。

 因みに、私はファビコンの背景は統一感を持たせるためにサイトの背景と同じ色、フォントは日本語であればHG行書体、英字であればAR BERKLEYで太字にしてぼかしを入れてた文字でファビコンを作成しています。

ico形式への変換

 gif形式のままでは表示出来るブラウザと出来ないブラウザがあります。このため、作成したgifファイルをico形式に変換が必要です。

 変換は「FavIcon from Pics」という海外のサイトで出来ます。

 「参照」ボタンをクリックし、作成したgifファイルを選択、「Generate」ボタンをクリックします。その後「Download」が出てくるためクリックするとファイルが保存出来ます。

 ダウンロードしたファイルはZIP形式のため解凍すると、ReadMeの他に以下2つの形式のファイルがあります。

・ico形式
 InternetExplorer、FireFox等で扱える形式で32px × 32pxのままですが、このままで使えます。お気に入りやブックマークからドラッグ&ドロップでデスクトップ等に張り付けるとショートカットアイコンとして表示可能です。ショートカットアイコンをクリックするだけでサイトを表示する事が出来ます。
・gif形式
 FireFox等で扱える形式で16px × 16pxに縮小されていますが、画像がスライドしてアニメーションするようになっています。ショートカットアイコンには出来ません。

 この2つのファイルをhtmlを置くディレクトリと同じかimg等のディレクトリ配下に保存します。

htmlへの記述

 ファビコンを使えるようにするにはhtmlタグで以下のように記述します。

<link rel="shortcut icon" href="ファイル名" />
<link rel="icon" href="ファイル名" type="image/gif" />

 ファイル名部分は保存したファイル名ですが、favicon.gif、favicon.ico等と記述します。

 又、ディレクトリ配下にファイルを保存した場合はディレクトリ/ファイル名、例えばimgディレクトリ配下のfavicon.icoであればimg/favicon.icoになります。

 2行はどちらもファビコンを使えるようにする記述ですが、InternetExplorerは2行目を解釈出来ないため、ico形式のファビコンを表示します。

 FireFoxでは1行目、2行目共に解釈出来ますが、後に記述しているgif形式が有効になり、スライドするアニメーション付きでファビコンが表示されます。

 ファビコンを使えるようにhtmlで記述しておけばブラウザで表示された時にタイトルの左に表示されるだけでなく、ブックマークされた時にも自動的にファビコンが表示されるようになります。

 尚、FireFoxでアニメーションさせない場合はico形式だけサーバーにアップロードして、1行目だけhtmlに記述します。

  • このエントリーをはてなブックマークに追加