元画像
PNG または SVG をアップロードするとプレビューが表示されます。
アイコンジェネレーター
PNG または SVG を1枚アップロードするだけで、favicon、PWA、App アイコンを安全余白付きで自動生成します。
- 無料で利用
- ログイン不要
- PNG・SVG に対応
- favicon・PWA 出力
アイコン生成ワークスペース
PNG または SVG をアップロードし、余白、背景、manifest、プレビュー、ダウンロードを主パネルで調整できます。
PNG / SVG アップロード
PNG と SVG に対応。透明 PNG またはシンプルな静的 SVG を推奨。推奨サイズは 512×512 以上。
PNG / SVG 画像をここにドラッグ
またはクリックして選択
レイアウト設定
PNG または SVG をアップロードし、余白、背景、manifest、プレビュー、ダウンロードを主パネルで調整できます。
余白モード
背景モード
プレビュー角丸
背景色
Manifest 設定
ZIP 一括、manifest 単体、個別ファイルのダウンロードに対応。
表示モード
プレビュー
PNG または SVG をアップロードするとプレビューが表示されます。
プレビュー
PNG または SVG をアップロードするとプレビューが表示されます。
検出した主体境界
PNG または SVG をアップロードするとプレビューが表示されます。
favicon プレビュー
—
Apple アイコン
—
PWA アイコン
—
maskable プレビュー
—
出力ファイル
以下のファイルを自動生成し、個別または ZIP でダウンロードできます。
ダウンロード
ZIP 一括、manifest 単体、個別ファイルのダウンロードに対応。
favicon プレビュー
4favicon-16x16.png
16×16
favicon-32x32.png
32×32
favicon-48x48.png
48×48
favicon.ico
48×48
Apple アイコン
1apple-touch-icon.png
180×180
PWA アイコン
2icon-192x192.png
192×192
icon-512x512.png
512×512
maskable プレビュー
2icon-maskable-192x192.png
192×192
icon-maskable-512x512.png
512×512
出力ファイル
3icon-256x256.png
256×256
icon-1024x1024.png
1024×1024
site.webmanifest
JSON
Manifest 設定
{
"name": "Toolbye App",
"short_name": "Toolbye",
"theme_color": "#2563eb",
"background_color": "#ffffff",
"display": "standalone",
"start_url": "/",
"icons": [
{
"src": "icon-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
},
{
"src": "icon-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
"src": "icon-maskable-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "icon-maskable-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any maskable"
}
]
}使い方
- PNG または SVG をアップロードすると、主体境界が自動認識されます。
- 余白モードと背景設定を選び、各プレビューを確認します。
- ZIP（PNG + favicon.ico + manifest）をダウンロードします。
favicon / PWA / maskable の違い
Favicon
1ブラウザのタブ表示用。小サイズで潰れない輪郭が重要です。
PWA アイコン
2ホーム画面やインストール用。主に 192 と 512 を使用します。
Maskable アイコン
3ランチャーの形状マスクに対応。主体は中心安全領域に置く必要があります。
よくあるミス
画像を端まで詰めすぎる
端いっぱいだと環境差で主体が切れて見えることがあります。
透明余白が多すぎる
透明余白が大きいとアイコンが小さく見えます。
未対応形式のアップロード
PNG と SVG をサポートします。複雑な SVG は簡略化するか PNG を使用してください。
元画像が小さすぎる
小解像度では 512/1024 出力でぼやける場合があります。
画像はサーバーに送信されますか？
この実装では、画像解析・生成・manifest 作成・ZIP 化はブラウザ内で実行されます。
通常利用時に、専用の画像処理 API へ画像を送信しません。
FAQ
アップロードできる形式は？
PNG と SVG に対応しています。透明 PNG とシンプルな静的 SVG を推奨します。
なぜ余白が必要ですか？
端に寄りすぎるとランチャーやタブで切れて見える可能性があるためです。
favicon と app icon の違いは？
favicon はブラウザ用の小さなアイコン、app icon はインストール表示向けです。
maskable icon とは？
端末側の形状マスクで切り抜かれても主体が残るようにしたアイコンです。
画像はアップロードされますか？
現在の通常フローではブラウザ内処理です。
推奨サイズは？
最低 512×512、可能なら 1024×1024 以上を推奨します。
なぜ透明 PNG が良いのですか？
主体境界を正確に検出しやすく、自動余白計算が安定するためです。
SVG の色を変更できますか？
はい。アイコン色を「カスタム」に切り替えると、プリセットまたは HEX で単色上書きできます。