画像から、アイコンをまとめて作る
favicon.ico｜16〜512pxのPNG｜iPhone・Android・Windows用｜丸・角丸・背景色｜HTMLのコードつき｜複数画像に対応｜画像は送信されません
1元になる画像を読み込む（複数可・最大20枚）
ここに画像をドラッグ＆ドロップ
または ファイルを選択（PNG, JPG, WebP, GIF / 最大20枚まで・1枚30MBまで）
※ 読み込んだ画像はお使いの端末内だけで処理されます。外部へ送信・保存されることはありません。
2アイコンの形を整える
読み込んだ画像（クリックで、表示を切り替え）
位置・大きさは、画像ごとに覚えます。ほかの設定は、すべての画像に共通です。ZIPで、すべての画像のアイコンをまとめて保存できます。
画像をドラッグすると、位置を動かせます（矢印キー・＋／−キーも使えます）。
できあがりの見え方（実際の大きさ）
タブの文字は、ブラウザのタブの見え方を示す例です（ページのタイトルの文字の例）。サイトの名前とは別のものです。
3作るアイコンを選んで、保存する
アイコンの色ではありません。スマホのブラウザ（アドレスバーなど）や、ホーム画面に追加したアプリの上部の色です。指定すると、theme-color・site.webmanifest・Windowsタイルの色に入ります。
入力した名前は、ZIPの site.webmanifest（ホーム画面に追加したときの名前）に入ります。アイコンの画像やタブの表示には反映されません。
※ 「オリジナルのままとする」では、元の画像のファイル名に、アイコンの種類だけを付けて保存します（例：logo_32x32.png）。元のファイルと同じ名前にはなりませんが、保存先のファイルと重なるときは、上書きに注意してください。
画像の処理はすべてお使いのブラウザ内で行われ、サーバーへは送信されません。元のファイルは変更されません。
このツールでできること
1枚の画像から、サイトのファビコン（favicon.ico）や、スマートフォンのホーム画面用アイコン、アプリ用のアイコンを、必要な大きさでまとめて作る無料のツールです。ロゴやイラスト、写真から、16×16・32×32・180×180・192×192・512×512pxなどのPNGと、複数のサイズが入ったICOファイルを一度に書き出せます。登録やインストールは不要で、画像は外部へ送信されません。
- favicon.ico を作成：16・32・48pxを1つに収めた、標準的なファビコンを作れます。
- PNGをまとめて書き出し：16・32・48px（ファビコン）、180px（iPhone）、192・512px（Android・PWA）、Windowsのタイルなど、用途別の大きさを一度に作れます。
- Windows用のICO：16〜256pxの7サイズが入った icon.ico も作れます。
- 形と背景を整える：四角・角丸・円の形、背景の透明／色塗り、まわりの余白、画像の位置と大きさを、プレビューを見ながら調整できます。
- Maskable（切り抜き対応）：Androidで丸などに切り抜かれても、図柄が欠けにくいアイコンも作れます。
- 実際の見え方を確認：16pxなどの小さい表示や、ブラウザのタブ（明るい・暗い）、iPhoneのホーム画面での見え方を、保存の前に確認できます。
- HTMLのコードつき：<head> に貼る <link> のコードと、site.webmanifest も、選んだアイコンに合わせて自動で作ります。
- 複数画像に対応：最大20枚まで読み込み、画像ごとのセットを、ZIPでまとめて保存できます。
使い方
- 「元になる画像を読み込む」の枠に、画像をドラッグ＆ドロップします。
- プレビューを見ながら、画像の収め方（全体を入れる／切り取る）、余白、形、背景を選びます。画像はドラッグで動かせます。
- 16pxなどの小さい表示で、図柄がつぶれていないかを確認します。
- 作りたいアイコンにチェックを入れます（おすすめの選択が、最初から入っています）。
- 「選んだアイコンを、ZIPでダウンロード」を押します。1つだけ欲しいときは、各行の「1つだけ保存」を使います。
- ZIPの中身を、サイトのルート（トップ）に置き、html-code.txt のコードを <head> に貼ります。
アイコンの大きさと、使われる場所
| ファイル名 | 大きさ | 主な用途 |
|---|---|---|
| favicon.ico | 16・32・48px | ブラウザのタブ、ブックマーク。古いブラウザでも使われます。 |
| favicon-16x16.png favicon-32x32.png | 16px・32px | タブ、ブックマーク（高解像度の画面では32px）。 |
| apple-touch-icon.png | 180px | iPhone・iPadの、ホーム画面に追加したときのアイコン。 |
| android-chrome-192x192.png android-chrome-512x512.png | 192px・512px | Androidのホーム画面、PWA（ホーム画面に追加できるWebアプリ）。 |
| maskable-icon-512x512.png | 512px | Androidで、丸・角丸などに切り抜かれるアイコン。 |
| mstile-150x150.png | 150px | Windowsのスタート画面のタイル。 |
| icon.ico | 16〜256px | Windowsのアプリやショートカット。 |
きれいなアイコンにするコツ
- 元の画像は、正方形に近く、大きいものがおすすめです。512px以上あれば、どの大きさにも対応できます。
- 図柄は、シンプルに。16pxでは、細い線や小さな文字はつぶれます。ロゴの一部だけを大きく使うと、見やすくなります。
- 「画像の収め方」は、ロゴなど全体を見せたいときは「全体を入れる」、写真などで四角いアイコンにしたいときは「切り取る」が向いています。
- 背景が透明な画像は、タブでは透明のまま表示されます。暗いタブでも見えるよう、色を塗るか、明るい色の縁をつけると安心です（プレビューで、明るい・暗いタブの見え方を確認できます）。
- iPhone用（180px）は、透明の部分が黒く表示されるため、このツールでは、背景を必ず塗って（透明のときは白）書き出します。角は、iPhone側が丸めるので、四角のままです。
- Maskableは、外側の約20%が切り取られることがあるため、図柄を内側におさめて書き出します。
よくある質問
favicon.ico は、どこに置けばよいですか？
サイトのルート（トップ）に置くのが基本です（例：https://example.com/favicon.ico）。置く場所を変えるときは、<link> の href を、そのファイルの場所に合わせて書き換えてください。
PNGだけでも、ファビコンとして使えますか？
現在の主なブラウザでは、PNGのファビコンも使えます。ただし、古いブラウザやRSSリーダーなどでは favicon.ico を探すことがあるため、両方を用意しておくと安心です。
反映されないときは、どうすればよいですか？
ブラウザが、前のアイコンを覚えている（キャッシュ）ことがあります。ページを強制的に再読み込みするか、ブラウザのキャッシュを消してから、確認してください。検索結果に表示されるアイコンは、検索エンジンが再び読み取るまで、時間がかかります。
SVGのファビコンは作れますか？
このツールで作れるのは、PNGとICOです。SVGは、元の画像をそのまま、別に用意してください。
ICOファイルの中身は、どうなっていますか？
複数の大きさのPNG画像を、1つのICOファイルにまとめた形式です。現在のブラウザやWindowsで広く使われている形式で、透明も扱えます。
保存されるファイル名は、どうなりますか？
「1つだけ保存」では、初期設定で、元のファイル名に「_icon」と種類が付きます（例：logo_icon_32x32.png）。「オリジナルのままとする」を選ぶと、「_icon」は付きません。ZIPの中は、サイトに置くときに必要な、標準の名前（favicon.ico、apple-touch-icon.png など）になります。複数の画像をまとめたZIPでは、画像ごとのフォルダに分かれます。
読み込める画像の大きさは？
1枚30MB、合計200MB、最大20枚まで、PNG・JPEG・WebP・GIFに対応しています。長辺が2048pxを超える画像は、2048pxに縮小して扱います（アイコンは最大でも1024pxなので、仕上がりには影響しません）。アニメーションGIFは、最初の1コマだけが対象です。
ほかの画像ツールも使いたいのですが。
背景を透明にしたいときは背景を透明にするツール、余白を切り取るときは画像トリミングツール、PNG・JPEG・WebPに変換するときは画像形式変換ツールが便利です。
