まりふのひと

ファビコン（favicon）を作ってみた

www Hatena

「お気に入りアイコン（ファビコン）の作り方」を参考にファビコン（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設定から任意の画像をアップロード(JPEG、PNG、GIF、ICO、BMP形式がアップロード可能です)すると、自動でリサイズと画像形式の変換を行いfaviconを作成します。ICO形式のファイルをご用意いただく必要はございません。

  1. ［管理］
  2. ［設定］
  3. 「お気に入りアイコン（favicon）」から画像を登録する。


■　参考