ファビコン・アイコン生成

このツールについて

Webサイトやアプリのアイコンは、表示される場所ごとに必要なサイズが違います。ブラウザのタブに出る小さなファビコンは16ピクセルや32ピクセル、スマートフォンのホーム画面に追加したときのアイコンは180ピクセル、アプリとして配信する場合は512ピクセルや1024ピクセルが求められます。

これらを1つずつ手作業で書き出すのは面倒で、しかもサイズを1つ忘れるとその場所だけアイコンが表示されません。このツールは、1枚の元画像から必要なサイズをまとめて書き出し、ZIPにして渡します。

使い方

1. 元になる画像をドロップするか、枠をクリックして選びます。
2. 必要なサイズを選びます。ボタンを押すたびに選択と解除が切り替わります。
3. 「アイコンを書き出す」を押し、ZIPでダウンロードします。

ファイル名は「元の名前_32.png」のようにサイズが付いた形になります。すべてPNG形式で出力されます。

元画像の選び方

アイコンは最終的に非常に小さく表示されます。16ピクセルは指先ほどの大きさしかないため、細かい要素は完全に潰れて判別できません。文字が入ったロゴをそのまま縮めると、ただの染みのように見えてしまいます。

小さいサイズでも認識できるのは、単純な形と明快な配色です。ロゴに文字が含まれている場合は、文字を省いてシンボル部分だけを使うか、頭文字1文字に置き換えたものを別に用意することをおすすめします。書き出したあと、実際に小さく表示して判別できるか必ず確認してください。

元画像は、書き出す最大サイズ以上の解像度を用意してください。512ピクセルのアイコンが必要なのに元画像が200ピクセルしかない場合、引き伸ばされてぼやけます。1024ピクセル程度の正方形の画像を1枚用意しておけば、すべてのサイズをそこから作れます。

背景の扱い

透過を保つと、どんな背景色の上でも馴染みます。ブラウザのタブに表示されるファビコンは、明るいテーマと暗いテーマで背景色が変わるため、透過にしておくほうが安全です。

一方、スマートフォンのホーム画面用アイコンは、透過部分が黒く表示される環境があります。ホーム画面向けのアイコンを作る場合は、背景に白を指定しておくと確実です。

よくある質問

画像がどこかに送信されることはありませんか

ありません。このページの処理はすべて、お使いの端末のブラウザの中だけで完結しています。画像がネットワークを通じて送られることはなく、当サイトの運営者を含め誰も内容を見ることができません。ブラウザの開発者ツールで通信状況を確認すると、画像に関する通信が発生していないことを確かめられます。

ico形式で出力できますか

このツールはPNG形式で出力します。現在の主要なブラウザはPNGのファビコンに対応しているため、ico形式は必須ではありません。

複数の画像をまとめて処理できますか

できます。選んだ画像それぞれについて、指定したすべてのサイズが書き出されます。ただし枚数×サイズ数のファイルが生成されるため、一度に扱う枚数は控えめにしてください。

利用に料金はかかりますか

かかりません。会員登録も不要です。回数制限や透かしの埋め込みもありません。

書き出したアイコンはどこに置けばいいですか

Webサイトの場合は、サイトの最上位の階層にファイルを置き、HTMLの先頭部分からリンクを指定します。指定方法はサイトの作り方によって変わるため、お使いのサービスの案内をご確認ください。

サイズはどれを選べばいいですか

用途が決まっていなければ、初期状態で選ばれている6つをそのまま書き出しておけば大半の場面に対応できます。不要なものが混ざっていても害はないため、迷ったら多めに出しておくほうが後で困りません。

関連ツール

• 丸く切り抜きアイコンを円形に整えられます。
• 余白追加・正方形化正方形でない画像を切らずに整えます。
• フォーマット変換形式を揃えたいときに使います。