Photoshopで簡単!アイコンやファビコンを作成する方法

サムネイル Photoshop

今回はPhotoshopだけで誰でも簡単にできるサイトアイコンやファビコンの作り方を解説します。Illustratorいらずです。

ウィンドウタブに表示されているアイコン(ファビコン)をサクッと作ってしまいましょう。

また、ロゴを作ってsvg形式で保存する方法は以下の記事で解説していますので合わせてどうぞ。

 

スポンサーリンク

アイコンを作る

まずは元となるアイコンをPhotoshopで作ります。

画像の大きさは180x180pxがおすすめです。大きくする分には問題ないですが、小さくするとアイコン自体が小さく表示されてしまうのでカッコ悪くなってしまいます。

 

今回はこんな感じのアイコンを作ってみました。

画像1

 

 

 

 

 

 

作る時のポイントはできるだけシンプルに、かつ幅いっぱいに作ることです。幅いっぱいに作らないとただでさえ小さいアイコンがさらに小さくなってしまうので気をつけましょう。

画像ができたら保存します。保存形式はjpgやpngなどにしましょう。psdはダメです。

 

ico形式へ変換する

アイコンやファビコン画像の拡張子は.ico形式がベストです。

もちろんjpgやpngがダメなわけではないですが、アイコンやファビコンに一番適しているのはico形式です。

 

では作った画像をico形式に変換します。

以下のサイトで拡張子をアイコン向けに変更します。

ファイルを選択」をクリックして先ほど作った画像を選択しましょう。

 

すると画像がico形式とpng形式に変換されます。

一番左上の128×128のico形式の画像で「Download」をクリックすると、黒背景で画像が表示されるはずです。

画像2

 

適当な場所で右クリックし、「別名で保存」を選択します。

意味不明なファイル名になっていると思いますが、名前を好きなように変更して保存すればオーケーです。

画像3

 

拡張子が.icoで保存されていればアイコン(ファビコン)の完成です。

画像4

 

まとめ

Illustratorを使わなくても、Photoshopだけでアイコンやファビコンはサクッと作れます。

jpg画像でもpng画像でもアイコン(ファビコン)に変換できるのでとても便利です。