2xup.org

Photoshop で背景透過の美しい favicon (ファビコン) を作成する

favicon (ファビコン)はウェブブラウザのアドレスバーや、ブックマークした URL の横に表示される小さなアイコンです。いまやもうサイトのアイデンティティを明示するツールとしてほとんどサイトでみることができますが、小さいファイルであると共に、ファイルを扱えるソフトェアがそれほど多くは無いため、なかなか想い通りにデザインできない。という悩みを持っていました。できれば背景を透過にして、マットの少ない美しいものを作りたいと考えていて、使い慣れたソフトウェアである Adobe Photoshop で作れれば幸せだなあ。と思ってました。

2xup-emblem.jpg 100px*100pxこれまでは、FavIcon from Pics という Web 上のツールを利用して作っていましたが、これは背景を透過にできなかったり、元の画像から変換される際に大きく画像の質が落ちてしまうという欠点がありました。せっかく自分自身のウェブサイトならではのデザインができる部分なので、クオリティまでこだわりたいですよね。そうなるとやっぱり Photoshop で作成できれば最高なのですが、favicon に使われる Windows Icon (.ico) 形式のファイルは Photoshop で開く事もできません。同じような思いをしている人がいないかと思って調べてみると、やった! Photoshop で .ico 形式のファイルを開いたり、保存したりできるプラグインがありました。2xup のサイトシンボルをちょうどデザインしたところだったので、このサイトシンボルを利用した favicon を作ってみました(Adobe Photoshop CS を利用)。ひととおり作業をメモしておきます。

プラグインのインストール

Photoshop が起動していない状態で、ダウンロードした icoformat プラグインを Applications/Adobe Photoshop CS/プラグイン/ファイル形式 に置いて、Photoshop を起動するだけです。起動後、アプリケーションメニューから『プラグインについて』メニューでインストールされている事を確認できます。

favicon ファイルを作成する

favicon_001.png 既にサイトにエンブレムぽいものがある場合それを元に、無い場合はよく使っている色や好きな色を使って作成すると良いかもしれません。実際に作成する favicon.ico ファイルのカンパスサイズは、32px 四方ですが(実際は 16px 四方で表示される)、作業をする際は広いカンパスの方がデザインしやすいので、その倍にあたる 64px 四方くらいで作成します。最終的には 32px 四方に縮小、実際は 16px 四方で表示される事を考えデザインするのもひとつのコツだとおもいます。

32px 四方よりも大きいカンパスサイズで作成し、サイズダウンする際は『イメージ > 画像解像度』で行いますが、その際のオプションに Photoshop CS より追加されたバイキュービック法(シャープ)を利用すると画像のぼけ具合は少なくすみます。抱いているイメージとの差ができるだけすくなくなるように、実際に表示される 16px 四方にサイズダウンしてみたりと何度もテストして調整する事をおすすめします。Photoshop で作成していますので、一般的なアイコン作成ソフトウェアのようにアルファチャンネルでマスクして…。といった作業も必要なく、背景を透明にした favicon を作るのも簡単です。

favicon_003.png 291px*100pxデザインが完成した favicon ファイルは 32px 四方のファイルにサイズダウンして、必ず favicon.ico というファイル名と拡張子で保存します。保存する際は先ほどインストールした icoformat プラグインで追加された ICO (Windows Icon) フォーマットを選択してください。

作成したファイルをアップロードする

出来上がった favicon.ico ファイルをサーバにアップロードします。アップロード先はどこでも良いですが、ルートディレクトリにアップロードするといくつかのブラウザでは下位ディレクトリのファイルでも favicon を表示してくれます。さらに html ファイルの head 要素ブロックの中に以下のような link 要素を加えるとブラウザが favicon を発見する手助けができます(XHTMLの場合)。ルートディレクトリ以外の場所にアップロードした場合は、以下のような link 要素が必須になります。

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico のURL" />

また、Microsoft Internet Explorer では利用できませんが、.png ファイルなどの画像ファイルも favicon として使えます。その場合は、以下のような link 要素を html ファイルの head 要素ブロックの中に書きます(XHTMLで、.png ファイルを favicon として利用する場合)

<link rel="icon" type="image/png" href="favicon として利用するファイルの URL" />

うまく行かない場合

favicon がうまく表示されない場合は、以下の項目を確認してみてください。

4 Comments

lomo2006年4月29日 01:11

こんばんは:-)
ステキなTipsをありがとうございます。
ところで新しいFaviconはマルミミゾウのナナちゃんがモチーフだったりしますか?
(違ってたらごめんなさい!!)
なんだかステキな笑顔に見えます。

kaminogoya2006年4月29日 01:40

> lomo さん
こんばわんばー。ありがとうございます。
そうです! 新しい favicon はマルミミゾウのナナちゃんの笑顔をイメエジしました。見えにくいかもしれませんけれど、数字の 2 もいっしょになっています。

鷹野2006年4月30日 22:07

うわっ、これはナイスTips。
ありがとうございます。

kaminogoya2006年5月 1日 00:54

> 鷹野さん
光栄です。僕自身も非常に悩んでいたところでもあったので、すっきりしました。