ロゴ・アイコン一括サイズ変更

1. ロゴ画像（PNG・JPEG・WebP・SVG）をドラッグ＆ドロップ、クリック、または貼り付けで登録します。
2. Webサイト・favicon・PWA・iOS・Androidアプリ・SNS・企業ロゴ素材から、必要な用途を1つ以上選びます。
3. 透明部分のトリミング・余白・背景・角丸を調整し、小サイズ品質診断を確認します。問題があれば自動修正ボタンで解消できます。
4. 「画像を生成する」ボタンを押すと、選んだ全サイズをブラウザ内で一括生成します。
5. ZIPで一括ダウンロードするか、必要な画像だけ個別に保存します。ZIPにはHTML設置コードとsite.webmanifestも同梱されます。

用途別に必要なアイコンサイズと作り方

Webサイトやアプリを公開する際は、favicon・スマホのホーム画面アイコン・PWAアイコン・SNSプロフィールなど、用途ごとに異なるサイズと形式のロゴ画像が必要になります。ここでは主要な用途と、それぞれ何を用意すればよいかを解説します。

1. Webサイト（favicon・OGP）

ブラウザのタブやブックマークに表示されるfaviconは、16×16・32×32・48×48pxを基本に用意します。iPhoneのホーム画面に追加したときに使われるApple Touch Iconは180×180px、SNSやチャットでURLを共有したときに表示されるOGP画像は1200×630pxが目安です。

faviconは小さく表示されるため、社名の入った横長ロゴをそのまま縮小すると文字がつぶれて読めなくなります。小サイズにはシンボルマーク（マーク部分だけ）を使うのが基本です。

2. PWA（プログレッシブウェブアプリ）

PWA用には192×192・512×512pxの通常アイコンに加え、マスカブルアイコン（512×512px）を用意します。マスカブルアイコンは、端末側で円形・角丸・スクエアなど形状が切り替わっても中央の重要部分が欠けないよう、外周にセーフゾーンを設けたものです。Web App Manifestではアイコンの用途としてany（通常）・maskable（マスカブル）・monochrome（モノクロ）を指定できます。

3. iOS・Androidアプリ

iOSアプリのアイコンは40〜1024pxまで複数サイズが必要で、Appleはアセットカタログでの一括管理を推奨しています。Androidはmipmap-mdpi（48px）からmipmap-xxxhdpi（192px）まで、画面密度別に解像度を分けたフォルダ構成を採用します。アプリアイコンは原則として透明を使わず、背景を塗りつぶした正方形で用意します。

4. SNSプロフィール

各SNSのプロフィール画像は正方形が基本です。表示時に円形へ切り抜かれることが多いため、円の外に重要な要素がはみ出さないよう、余白を確保して中央に配置します。

5. 企業ロゴ素材

コーポレートサイトや資料で使うロゴは、横長・正方形・白色・黒色・透明背景・白背景など複数のバリエーションをそろえておくと、あらゆる背景に対応できます。暗い背景には白ロゴ、明るい背景には黒ロゴというように使い分けます。

透明ピクセルのトリミングと中央配置

透明背景のPNGは、画像の片側だけに大きな余白が残っていることがあります。画像の外形サイズを基準に中央配置すると、実際のロゴが左右どちらかにずれて見えてしまいます。このツールは透明ピクセルを除いた「実際に描画されている領域」を解析し、その範囲を基準に光学的な中央へそろえて配置します。これにより、複数のアイコンを並べたときの見た目サイズが統一されます。

解像度不足に注意

元画像が小さいまま大きなサイズ（512pxや1024pxなど）に拡大すると、輪郭がぼやけたり線がにじんだりします。可能な限り大きめのPNG、または拡大に強いSVGを元画像に使うのがおすすめです。SVGはベクター形式のため、どのサイズに書き出しても輪郭がシャープに保たれます。

Q. ロゴから一度に何種類のアイコンを作れますか？

A. Webサイト用（favicon 16/32/48px・Apple Touch Icon・OGP画像）、PWA用（192/512px・マスカブル）、iOS用、Android用mipmap各解像度、SNSプロフィール、企業ロゴ素材などを、選んだ用途に応じて数十種類まとめて生成できます。用途は複数同時に選べ、生成前に合計ファイル数が表示されます。

Q. faviconのサイズは何pxが必要ですか？

A. 16×16・32×32・48×48pxを基本に、iOS向けのApple Touch Icon（180×180px）、PWA向けの192×192・512×512pxを組み合わせる構成が推奨されます。「Webサイト一式」「PWA一式」プリセットを選ぶと自動で生成されます。

Q. アップロードした画像はサーバーに保存されますか？

A. 保存されません。読み込み・リサイズ・トリミング・ZIP生成はすべてブラウザ内（JavaScript／Canvas）で完結し、画像がサーバーに送信されることはありません。社外秘のロゴでも安心してご利用いただけます。

Q. 小さいサイズにするとロゴの文字がつぶれてしまいます。対策はありますか？

A. 横長ロゴを16〜48pxに縮小すると社名が読めなくなるため、シンボルマークの登録を推奨します。「別のロゴも登録」からシンボルマークを追加すると、小サイズにはシンボル、ヘッダーには横長ロゴというように自動で使い分けられます。診断機能が問題を検出し、自動修正も提案します。

Q. PWAのマスカブルアイコンとは何ですか？

A. 円形・角丸・スクエアなど端末側で表示形状が変わっても重要部分が欠けないよう、外周にセーフゾーンを確保したアイコンです。Web App Manifestでpurposeにmaskableを指定して使います。このツールはマスカブル用に20%の余白を自動確保します。

Q. 透明背景のPNGを使うと余白がずれます。どうなりますか？

A. 画像サイズではなく、実際に描画されている領域（透明ピクセルを除いた範囲）を解析し、その範囲を基準に中央配置します。片側だけ余白が残った透明PNGでも光学的に中央へそろえるため、アイコンごとの見た目サイズが統一されます。

Q. どの画像形式に対応していますか？出力形式は選べますか？

A. 入力はPNG・JPEG・WebP・SVGに対応しています。SVGはどのサイズでも高精細に出力できます。出力形式はPNG（透明対応・推奨）・WebP（軽量）・JPEGから選べます。favicon・PWA・アプリ用アイコンは仕様に合わせPNGで固定されます。

Q. 生成した画像をサイトに設置するコードももらえますか？

A. はい。ZIPにはhead内へ貼り付けるHTMLコード（install.html）とPWA用のsite.webmanifestが同梱されます。favicon・apple-touch-icon・manifestのlinkタグをコピーしてそのまま使えます。

Q. スマートフォンでも使えますか？

A. はい、スマートフォン・タブレット・PCに対応したレスポンシブデザインです。「ロゴを登録→用途を選択→診断・調整→ダウンロード」とステップ形式で進むため、初めての方でも迷わず操作できます。

このツールは無料でご利用いただけます。画像はブラウザ内で処理され、サーバーには保存されません。生成結果はあくまで目安です。iOS・Androidアプリへの提出時は、各ストアの最新のアイコン仕様も併せてご確認ください。