Photoshopでアイコンファイル(.ico)を作る方法

アイコンファイルとは、ファビコンと呼ばれるものです。ブラウザのタブの先頭や、お気に入りに登録した時のお気に入りの横など様々な場所に表示されるものです。

タブで表示されている時でも、お気に入りのリストから見つけたい時でも、ファビコンを設定していると、ユーザーが素早く自分のサイトを見つけてくれるでしょう。そんなファビコンのアイコンファイルをPhotoshopで作成する方法をご紹介します。

Photoshopでアイコンファイル(.ico)を作る方法

まず実際のファビコンを見てみましょう。当サイトでも設定されています。サイト名の左側のアイコンです。

screenshot 688

Photoshopでico形式でファイルを書き出すには、プラグインのインストールが必要になります。

http://www.telegraphics.com.au/sw/product/ICOFormat#icoformatからプラグインをダウンロードして、Photoshopにインストールしてから開始しましょう。

ファビコンは、最終的には、16×16ピクセルになります。思ってるよりも小さいので、小さくてもユーザーがわかりやすいデザインを考える必要があります。

まず、Photoshopを開いたらメニューバーからファイルを押して新規を選択してください。あとで小さくすればいいので(16ピクセルでは作業しづらいです)好きなサイズの正方形を作成してください。

screenshot 689

デザインを作成します。今回はUXMILKのUだけにしました。2文字にする場合は、さらに文字を細くする必要があります。

screenshot 693

メニューバーのイメージを押して、画像解像度を選択してください。画像解像度からサイズを変更します。ピクセル数を16に指定して、一番下のバイキュービック法をシャープ(縮小に最適)にしてOKを押してください。

screenshot 692

これが実際のサイズになった状態です。

screenshot-6942

あとは、メニューバーのファイルを押して、別名で保存を選択します。ファイル名を「favicon」にして、ファイル形式でICOを選択するだけです。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて

購読

平日・週2回更新