ファビコン(favicon)を作ってみた

お気に入りアイコン(ファビコン)の作り方」を参考にファビコン(favicon)を作ってみた。

 作成した画像は、GIFまたはPNG形式等で保存しておきます。
 ファビコンで使用する画像は、あらかじめ 16×16 に縮小しておくことをお勧めします。大きめの画像でもファビコンに変換することができますが(変換時に自動的に縮小される)、画質がやや悪くなってしまうようです。

16×16 の大きさと言えば、ビットマップ・フォント時代の外字作成のイメージだ。こりゃ大変だぁ〜

  1. まずイメージを固めるため、Word2003 で適当な大きさの正方形+ワードアートで画像を作成。
  2. グループ化し、
  3. JTrim に貼り付けた。
  4. ウィンドウサイズに合わせると‥‥ 上手くできている。
  5. 16×16 にリサイズする‥‥ と、「ギャぁ〜」
  6. 現寸表示する‥‥ と、「こりゃダメだ」

ペイントでやるしかない 

  1. ペイントを起動。(WindowsXP
  2. キャンバスのサイズを 16×16ピクセルにする。
  3. 8倍に拡大。
  4. 文字を入力‥‥ するも、出来ない。
     ∵ 拡大モードでは文字入力は出来ないようだ。
  5. 16×16ピクセルで薄い色に塗りつぶしておいて、
  6. キャンバス・サイズを拡げる。
  7. 文字を色々なフォントサイズで入力してみると、10ポイントが最大‥‥ とわかる。
  8. フォントサイズ 9ポイントで“ま”を入力し、
  9. 周囲を│で囲む。
  10. 16×16ピクセルにトリミング。
  11. 8倍に拡大+グリッド線表示で、主に「鉛筆」で画像を描き、
  12. ping形式で保存した。

 次に、作成した画像をファビコン用の形式に変換します。ファイル形式の変換は、次のサイトで行うことができます。
 FavIcon from Pics (英語)
※ご安心ください。英語が苦手の私でも簡単に操作できました。

手順に従い、favicon.ico ファイルを入手した。

 4. タグの設定
 ページの 〜 内に、LINKタグを設定します。

 HREF="" に、favicon.ico ファイルへのパスを指定します。http:// で始まる絶対パス、または相対パスで指定することができます。

「麻里府発」のヘッダーにリンクタグを設定して‥‥ 完成!!!



 はてな」への登録
favicon設定について」を参考に行った。

 なお、favicon設定から任意の画像をアップロード(JPEGPNG、GIF、ICOBMP形式がアップロード可能です)すると、自動でリサイズと画像形式の変換を行いfaviconを作成します。ICO形式のファイルをご用意いただく必要はございません

  1. [管理]
  2. [設定]
  3. 「お気に入りアイコン(favicon)」から画像を登録する。


 参考