操作方法
- 画像を選択：ヘッダーの「画像を選ぶ」からロゴ画像を1枚アップロード（PNG/JPG/WebP など）。
- 見た目を調整
- 背景色：
#ffffffのようなカラーコードを入力（透過部分の下地色になります）。 - 余白(%)：0–30%（アイコン周囲のマージン）。
- 背景色：
- 生成：生成ボタンを押すと、各サイズのPNGを一括生成してカードに表示。各カードのダウンロードを押して保存。
- タグ出力：下部のコード枠に
<link>タグ群が表示されるので、タグをコピーでクリップボードへ。
成果物（得られるもの）
- 次のPNGファイル：
16, 32, 48, 64, 180, 192, 512 px- 自動命名：
favicon-16x16.png,favicon-32x32.png,favicon-48x48.png,favicon-64x64.pngapple-touch-icon.png（180×180）android-chrome-192x192.png,android-chrome-512x512.png
- 自動命名：
<head>に貼る推奨タグ一式（コピー可）- 背景色・余白を反映したフラットなPNGアイコンセット
注意点
- 設置場所：タグ内の
href="/..."はサイトルート想定。別ディレクトリに置く場合はパスを修正してください。 - WordPress：
<head>への挿入は「ヘッダー用カスタムコード」やテーマのHead挿入機能を使用。Cocoon なら「アクセス解析・認証」> ヘッダー追記 等。 - 透過の扱い：透過は指定した背景色で塗りつぶします（完全透明は維持されません）。
- 未生成の形式：
favicon.icoと SVG, maskable icon は本ツールでは生成しません（必要なら別途用意）。 - PWA配慮：Android用は 192/512 を出力しますが、maskable 用途なら専用のアイコン（安全域大きめ,
purpose="maskable"）を別途準備推奨。 - 色指定の妥当性：
#RRGGBBなど有効なCSSカラーを入力。無効値は反映されません。 - ブラウザ制限：大きな元画像・古い端末ではメモリ不足になる場合あり。
- セキュリティ：すべてクライアントサイドで処理。ファイルはアップロードされません。
コメント