アイコン工房
ロゴ1枚から一式を。ブラウザのタブ、ナビのロゴ、iPhone のホーム画面、Android / PWA、Chrome 拡張、円形アイコンまで。各サイズはプラットフォームが公表する規則に従って描画・命名され、実際に表示されるサイズの本物のUIの中でプレビューされます。
ここに画像をドロップ、またはクリックして選択
JPG / PNG / WebP / AVIF / GIF（GIF は先頭フレームのみ）。2560px 以上を推奨。
1024×1024 の正方形ロゴを推奨します。正方形以外も比率を保って余白付きで埋め込めます。
実際に受け取るもの
知っておきたい3つの落とし穴
iOS のアイコンはアルファを持てない
アルファ付き PNG を apple-touch-icon.png に渡すと、システムは透過ピクセルを黒で埋めます。暗い端末に暗い輪が残り、壊れた素材に見えます。そのためここでは該当サイズを強制的に不透明にしています。
maskable が保証するのは中央 80% だけ
Android のアダプティブアイコンはランチャーの形（円・角丸・しずく型）でマスクされ、保証されるのは中央 80% だけです。512 における安全円は直径 410px しかありません。文字や要の形を端に寄せると、ホーム画面で切られます。
16px ではシルエットしか残らない
タブ内の favicon は 16×16、合計 20 ピクセルです。細線、グラデーション、小さな文字はすべて消え、色の塊だけが残ります。生成後はプレビューを8倍に拡大して輪郭を見てください。判別できなければ、マークを簡略化してください。
よくある質問
ファイルは正しいのに、実際のサイトが反映しないとき画像はどこかにアップロードされますか？
いいえ。デコード・埋め込み・エンコードはすべてブラウザのキャンバス内で動き、このページにファイルのエンドポイントはありません。ネットワークパネルを開いてください。ページ自身の静的アセット以外に、あなたの画像を運ぶ通信はありません。
20 ファイルすべてを配置する必要がありますか？
いいえ。最小構成は favicon.ico（旧来のクライアントはこれしか要求しません）と PWA アイコン1つ（192 か 512。インストール可否の判定が見るもの）です。あとは対象プラットフォームに合わせて足してください。iOS のホーム画面グループは 4 サイズ（180 / 167 / 152 / 120）あり、iPhone だけなら 180 で足ります。
アイコンを差し替えたのにタブが古いまま？
favicon は Web で最も粘り強いキャッシュのひとつで、参照している HTML より長生きすることもよくあります。ローカルではスーパーリロード（⌘/Ctrl + Shift + R）、本番では CDN とブラウザのキャッシュの両方が切れるのを待ちます。すぐ確認したいときは link の href に ?v=2 を付けてください。URL が変われば再取得されます。どれも生成したファイルの問題ではありません。
favicon.ico と PNG の両方が必要ですか？
はい。ただし分割する必要はありません。favicon.ico は /favicon.ico を直接要求する旧来のクライアントをカバーし、すでに 16 / 32 / 48 を内包しているのでブラウザが表示密度で選びます。PNG はモダンブラウザとフィードリーダー向けの明示的な宣言です。
favicon.svg を拡大するとぼやけるのはなぜ？
この2ファイルは SVG に埋め込んだビットマップで、真のベクターではないからです。ビットマップをベクターには変換できません。16px でパスをトレースしても純粋なノイズになるため、正直に埋め込む方がましです。存在理由はファイル名と参照を揃えるためで、本番では同じ名前でデザイナーに本物のベクター SVG を書き出してもらってください。
元画像はどのくらいの大きさがいい？正方形でなくても？
1024 × 1024 の正方形ロゴなら最大出力をちょうど満たせます。正方形以外も使えます。短辺側に余白を付けて中央に比率どおりに埋め込まれ、引き伸ばされることはありません。余白は余白スライダーで調整できます。
カードの「元画像が小さすぎます」とは？
そのサイズのキャンバスが元画像の有効領域を超えており、そのピクセルは拡大補間するしかなく、ぼやけます。問題は入力側で、書き出しではありません。大きい元画像を用意するか、「拡大しない」をオンにして元のピクセルをそのまま埋め込み、ぼかしではなくピクセル格子を見てください。
正方形を選んだのに、アイコンが正方形なのはなぜ？
もともと正方形です。512 は正方形のキャンバスを書き出し、円はアップロード後にプラットフォームが適用します。形状を円にすると書き出した PNG の四隅が透過になりますが、その透過を白や黒で埋める枠もあり、迷ったら正方形のままが無難です。
余白スライダーを動かすたびに再計算されますか？
再計算しますが、間引かれます。手を止めると描画し、さらに変更があれば前回の実行を打ち切ります。再描画中も古い結果が画面に残り、最後にまとめて差し替わるので、ドラッグ中にページが骨組みだけになることはありません。
ZIP には他に何が入っていますか？
README.txt が入ります。元画像名と寸法、切り抜きがあればその範囲、今回の描画パラメータ（形状 / 余白 / 背景 / 透過）、全ファイル一覧、2つのスニペット。同僚は何も聞かずにこの束だけで作業できます。アーカイブ名は icons-20261024-1208.zip のようにローカル時刻付きです。