忍者ブログ

歩くんですの箱 SS置き場

躍動感を表現するにはどうすればいいんだろう……と日々考え中。

はじめまして!

はじめまして、新都市東京高速鉄道管理人のtamantrain です。

しかし、自分がまさか再びブログを開設することになろうとは・・・・・・。実は、随分前に「白鷺白鳥」というブログを経営していたんですが、続かなくなったものですから、閉鎖することとなってしまいました。今回も、更新頻度は低くなりそうですが、なんか書くことが思いついたときだけ、更新したいと思います。

さて、本日、我がサイトにfavicon を設置しました。そこで、皆さんにfavicon の作り方を紹介したいと思います。架空鉄道のホームページをつくっておられる皆さん、是非見ていってください。

ですが、そもそも、favicon って何なの?って思われた方も多いかと思います。favicon っていうのは、例えば新都市東京高速鉄道のホームページを開いたときに、ブラウザのアドレスバーやお気に入りのところに下の写真のような感じで表示されてるやつのことです。細かいことですが、これがあるのとないのとで違うと思いますよ。
favicon表示例1 favicon2

では、favicon の作り方を紹介します。

〔行程1〕元画像の作成
まず、元となる画像を準備します。ペイントでもなんでも、好きなソフトで正方形の画像を作りましょう。ただし、後で縮小するために大きめの画像にして下さい。筆者は52px×52px の大きさにしましたが、Mac ユーザーのことも配慮すると128px×128px ぐらいの大きさが理想的なようです。
↓こんな感じです。

〔行程2〕保存
元画像が完成したら、それをフルカラービットマップ形式で保存します。 元画像のコピーを「G・こんばーちゃ」などのソフトを使って8ビット(256色)に減色し、16px×16px、32px×32px、64px×64px、128px×128px の各サイズに変更してPNG形式かビットマップ形式で保存してください。ただし、筆者は元画像を小さく作りすぎたため、16px×16px、32px×32px のもののみを作成しました。
↓こんな感じです。

〔行程3〕ico 形式に変換する
「@icon変換」など、マルチアイコンを作成できるソフトを使って、用意した画像を一つのアイコンファイルにして保存します。favicon.ico というファイル名で、あなたのホームページがあるフォルダに保存してください。

〔行程4〕完成
HTMLファイルの、<HEAD>~</HEAD>タグの間に、
<link rel="shortcut icon" href="favicon.ico">
<link rel="icon" href="favicon.ico">
という2行を追加して、アップロードすれば完成です。
上手くいきましたか?

一通りお読みいただきまして、ありがとうございました!新都市東京高速鉄道広報部では、ホームページより先にSHに関する最新情報を公開していく予定です。今後とも宜しくお願いします。

拍手[0回]

PR