元画像
PNG または SVG をアップロードするとプレビューが表示されます。
アイコンジェネレーター
PNG または SVG を1枚アップロードするだけで、favicon、PWA、App アイコンを安全余白付きで自動生成します。
PNG / SVG アップロード
PNG と SVG に対応。透明 PNG またはシンプルな静的 SVG を推奨。推奨サイズは 512×512 以上。
PNG / SVG 画像をここにドラッグ
またはクリックして選択
レイアウト設定
余白モード
背景モード
プレビュー角丸
背景色
Manifest 設定
プレビュー
検出した主体境界
PNG または SVG をアップロードするとプレビューが表示されます。
favicon プレビュー
—
Apple アイコン
—
PWA アイコン
—
maskable プレビュー
—
出力ファイル
以下のファイルを自動生成し、個別または ZIP でダウンロードできます。
favicon-16x16.png
16×16
favicon-32x32.png
32×32
favicon-48x48.png
48×48
apple-touch-icon.png
180×180
icon-192x192.png
192×192
icon-512x512.png
512×512
icon-maskable-192x192.png
192×192
icon-maskable-512x512.png
512×512
icon-256x256.png
256×256
icon-1024x1024.png
1024×1024
favicon.ico
48×48
site.webmanifest
JSON
ダウンロード
ZIP 一括、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
ブラウザのタブ表示用。小サイズで潰れない輪郭が重要です。
PWA アイコン
ホーム画面やインストール用。主に 192 と 512 を使用します。
Maskable アイコン
ランチャーの形状マスクに対応。主体は中心安全領域に置く必要があります。
よくあるミス
画像を端まで詰めすぎる
端いっぱいだと環境差で主体が切れて見えることがあります。
透明余白が多すぎる
透明余白が大きいとアイコンが小さく見えます。
未対応形式のアップロード
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 で単色上書きできます。