- 2008年3月10日 23:53
- MovableType | ブログ・インターネット |
- Comments: 0
- TrackBacks: 0
-
- Tags: Favicon, Photoshop
このブログを始めて間もない頃から、Favicon（ファビコン）を付けています。
ファビコンとは16×16のアイコンのことで、ブラウザのタブ、アドレスバー、お気に入りの先頭などに表示することが出来ます。
ファビコンがあると、タブブラウザでたくさんページを開いていても自分のページがどれかすぐに分かって便利です。
いつも見てるサイトにファビコンがあると覚えますし、一種のシンボルになります。小さいけどアピール力ありますよね。
余力（暇）があるときに一度付けてしまえば、飽きるまでずっと使えますし良いと思います。
ファビコンの作り方ですが、Web上にもたくさんのサイトがありますし、フリーソフトもあります。
ii IDEAのファビコンは細かい画像にしたかったので、はじめPhotoshopで制作しました。
.jpgで適当な大きさの立体的な赤い球体を作り、iiとフォントを入れました。そのあと.jpg画像からファビコンに変換するソフトを使いました。
しかし、背景が透過されず白い四角の中に赤い丸が入っていてしかもギザギザの縁が表示されてしましました。何とも不格好。
私がやりたかったのは、現在のファビコンみたいにつるんとした丸が表示されたものでした。
どうしてもそうしたかったので、ネットで血眼で探し（言い過ぎ）ナイスエントリを発見。
>>Photoshop で背景透過の美しい favicon (ファビコン) を作成する
このサイトを参考にFaviconを制作しました。
Photoshopではfavicon に使われる Windows Icon (.ico) 形式のファイルを開けないし、保存も出来ません。直接Photoshopで制作出来ないということです。
しかし、上記のサイトでも紹介されているフォトショップ用プラグイン ICO (Windows Icon) Format を使うとPhotoshopで直接Windows Iconを使えるようになります。
使えるのは Photoshop の全てのバージョンとElementsとPaint Shop Pro (v9 recommended)です。私の持っている古いElement2.0でも問題なく使用できました。
サイトからICOFormat.zipをダウンロードして解凍し、Program Filesの『Photoshop』→『プラグイン』→『ファイル形式』にコピーしてください。その後Photoshopを起動します。
アイコン用のフォーマットなので、大きなサイズの画像を保存するときには表示されません。
先ほどのサイトを参考に、最終的には16×16で表示されることを見越した上で64×64サイズで作成し（作業しやすさのため）、縮小することにしました。
64×64サイズ
デザインが完成したら32×32pxにサイズダウンします。（画像解像度やカンバスサイズで変更）分かりやすい様に「favicon.ico」 というファイル名と拡張子で保存。
保存する時は前述のプラグインで追加された ICO (Windows Icon) フォーマットを選択すること。
これで縁が透過されたキレイなFaviconが出来るはずです。
32×32サイズ
これをサーバーにアップロードします。
ファビコン画像は画像ディレクトリ等にアップロードすればOKです。
MovableTypeの場合、『デザイン』→『テンプレートモジュール』→『テンプレート』→『ヘッダー』の<head>～</head>の間に
<link rel="shortcut icon" href="http://自分のサイトURL/favicon.ico>
というタグを挿入すれば表示されるようになります。 タグのパス（href="ここ"）にはファビコンをアップロードした場所のURLを入力すること。
これでキレイなFaviconでサイトを飾ることができます。
