りおきちどっとこむ: faviconを作る

[BlogTop » Web/Digital Topics » faviconを作る]

[2005-06-03]

faviconを作る

お気に入りに登録したときサイト名の前にオリジナルのアイコンが表示されたら、ちょっといい感じ。(^-^)
というわけで、faviconを作った。
Firefoxではバッチリ、IEでも上手くいくとちゃんと表示されるはず。MacでもSafariならOKかなぁ。

キャッシュの関係で表示されてないかもしれないけれど、現在はこれ。

と、これだけではあまりにも内容がないので、簡単な作り方なぞ…。

一番簡単なのは
フリーの素材を借りてきてアイコンファイルに変換すること。16×16ピクセルの素材なら、大きさもそのまま使える。（もちろん、加工やファイルタイプの変換が許可されてる素材に限る）
しかし、借り物ではオリジナリティが全くない。トレードマークともいえるfaviconがこれでは…ね。なのでこの方法はあまりオススメできない。

そこで、自分で撮ったを写真をfaviconにする
これなら、100%オリジナルで、絵が描けなくても大丈夫。

手順は簡単、写真を16×16ピクセルに縮小するだけ。それをbmpで保存して、変換ソフトでiconファイルにする。
しかし、これだけ小さくすると、素材によっては「これは何？」という代物になってしまう。
リオンの場合は目鼻も不明な茶色の固まりになりますね。(笑)　
そこでひと手間かけてやります。（Windows版です）

まず、お手持ちのフォトレタッチソフトを用意。PhotoShopでもPaintShopProでもレイヤーを使えるソフトであれば何でもok。PhotoShopElementsも大丈夫（よくカメラなどにバンドルされているので、持ってる人多いかな）

次に写真を用意。できるだけ対象がはっきり写っている物を選びましょう。
写真を開いたら新規レイヤーを2枚追加します。
写真から使いたい部分を選択→選択部分をコピー→追加したレイヤーの上にある方にペースト。（名前を「パーツ」とでもしておきます）
追加した下のレイヤーに好みの色を塗ります（背景色になります）
ペーストした部分が自然に見えるようにボケあしのある消しゴムをかけて調整。

ココまでが第一段階

次にPhotoShopであれば調整レイヤーを使って、縮小したときにキレイに見える工夫をします。
調整レイヤーが使えないときは、「パーツ」レイヤーを複製して使います。
ポイントは、「パーツ」レイヤーには何も補正しないこと。
明度、コントラスト、色によっては彩度、をプラスします。このときの補正は思い切りかけてください。写真を見ると酷いことになってますが、気にしなくて大丈夫。
必要なら、アンシャープマスクもかけます。これも思い切り。(笑)
補正がすんだらサイズを変更します。一気に16×16ピクセルに縮小してかまいません。

ビックリするような画になってるかと思いますが、心配無用。
ここで、補正をかけたレイヤーの「不透明度」を下げます。好みの画ができるまで不透明度を調整してください。
最後に一番上に新規レイヤーをプラスして、1px幅の枠を入れます。

↑の図では（PhotoShopElements）、下から元写真、背景色、パーツ、アンシャープマスク、明度・コントラスト、彩度、レベル補正、外枠のレイヤーになっています。
アンシャープマスク、明度・コントラスト、彩度のレイヤーの不透明度を調整しています。

気に入った画ができたら、bmpで保存します。ファイル名は何でもかまいません。
保存したファイルをアイコン変換ソフトで開き、「favicon.ico」という名前で保存します。

アイコン変換ソフトは、vectorなどで探しましょう。
わたしの使ったのはこれです。
@icon変換(Windows95/98/Me/アミューズメント)

自分で描きたいという方は
アイコンエディターで描きましょう。(^-^)
オススメのソフトはこちら。
TAKABO SOFT NETWORK　：　EDGE

サーバーのルートにアップロードします
faviconの詳しい話題はこちらでどうぞ
とほほのWWW入門：「お気に入り」アイコンを指定するには？

おまけの工夫
<head>～</head>の間で指定すれば、ひとつのフォルダ（ディレクトリ）だけ変えることもできます。
<link rel="shortcut icon" href="アイコンのURL/favicon.ico" type="image/ico" />

2ndBlogだけfaviconをtorimaruにしてみました。(^-^)

# 2005-06-03 22:58

Trackbacks

このエントリーの trackback URL:
http://liokichi.com/blogmt/mt-tb.cgi/78

このリストは、次のエントリーを参照しています: faviconを作る:

» faviconに挑戦
お友達のサイトを［お気に入り］に登録したら、な・な・なんとサイト名の前に、うちの子アイコンが表示されてる。どんな風にして作ってるんだろう[:クエスチョン:]... [Read More]

from Local WANKO living news | 2005-07-13 00:22

Comments

いやぁ～懇切丁寧な説明だわ～。感動（●＾o＾●）
しかしIEではFaviconはほんと不安定ね。
表示される時とされん時とあるね。
キャッシュや一時ファイルをDeleteしても駄目な時あるしねぇ。その点Firefoxだと必ずちゃんと表示されるよね。

ほいでもサーバーによってはicoファイルを表示しない設定になってるとことか外部ファイルを呼び出せないセッティングがされてるやつもあるらしいね～。

Setsuko | 2005-06-04 12:17

Setsukoはん
5時出発でしょ、寝なくていいのかね～。(^m^)

うんうん、IEはホント不安定。昨日まで表示されてたfaviconが今日は無い。(笑)
Firefoxは何もしなくてもバッチリだよ。Sleipnirではどう？

はぇ～、それはしらなかった。そんな設定のサーバーがあるんだ～～。
あ、プロバイダとかのおまけエリアならアリかもだね。
たくさんの人数で使ってるから、負荷も高いんでしょ。

torimaru | 2005-06-04 13:23

残念ながら　Mac ではリオンくんのfavicon表示されなくて　以前同様ルビー？の正面むいたわんこだよ〜
それよりも、BBSなんですが、Skinしか表示されないの　なじぇ？？？？(__;)

CANDY MUM | 2005-06-04 20:56

CANDY MUMさん
ありゃ、まだ前のキャッシュが残ってるんですね、きっと。
ほっておいてもそのうち変わると思うんですが。σ(^◇^;)
キャッシュをクリアして、お気に入りも一度削除してみるとか…。ダメかな。(^^ゞ

あれ　前にはティーくんの写真貼ってくれましたよね。あれから何も変えてないんですが。
もしかして、OSのバージョンアップをしました？
じゃなければ、Safariのバージョンが違ったりしてませんか？

torimaru | 2005-06-04 21:36

う〜ん　キャッシュの問題じゃないみたいなんだけど…
以前書き込みしたのは、2ＦのMacで見えないのは1Ｆの新しいMacなんです。新しいMacは仕事にも使うので、故意にOSのバージョンアップを止めてはいるのですが…
因みに　Safariは2.4 (v125.12)
MacOS X　の10.3.8なんですけど(__;)

CANDY MUM | 2005-06-05 06:08

CANDY MUMさん
BBS、Safariで大丈夫というので採用に踏み切ったのですが、どうしてでしょうね。？？？？(-"-)？？？？
バージョンからすると新しいみたいですが、Skinが見えてログが見えないという原因が、さっぱり見当つきません。
原因の特定ができなければ、対応の使用もないわけですもんねぇ。参った。
見えないのはうちだけですか？
ほかのWAMUBoardは大丈夫なのかしら？