1 枚の正方形画像から、Web、Android、iOS の本番対応アプリアイコンパッケージを作成します。Favicon、PWA マニフェストアイコン、Android ランチャーリソース、Xcode AppIcon.appiconset を 1 つのブラウザベースワークフローで生成できます。
ファイルをドラッグ＆ドロップまたはクリックして選択。JPG、PNG、WebP等形式に対応。
PNG の favicon、favicon.ico、Apple touch アイコン、PWA アイコン、オプションのマスク可能アイコン、site.webmanifest、貼り付け準備済みの head タグスニペットを作成します。
密度固有のランチャーアイコン、オプションの丸アイコン、Android アダプティブアイコンリソース、512×512 の Play ストア掲載アイコンをエクスポートします。
iPhone、iPad、App Store のアイコンスロットを含む AppIcon.appiconset と、Xcode が必要な Contents.json ファイルを取得します。
1 つのソース画像と共有のパディング・背景設定を使用して、ブラウザ、Android、iOS のアイコンを視覚的に一貫させます。
予測可能なファイル名の web、android、ios フォルダと、各ファイルセットの配置場所を説明する README をダウンロードできます。
ソース画像はリモート画像処理サーバーに送信されず、ブラウザ内で処理されます。
1:1 の比率の PNG、JPEG、WebP 画像を使用します。最小許容サイズは 512×512。1024×1024 以上を推奨します。
Web/PWA、Android、iOS、またはその 3 つすべてを選択。アセット生成前にアートワークのパディングと背景色を設定します。
エクスポート前に、ブラウザータブ、Android ランチャー、iOS ホーム画面のプレビューで結果を確認します。
プラットフォームフォルダ、設定ファイル、コードスニペット、プロジェクト用 README を含む 1 つの ZIP をダウンロードします。
必要なプラットフォームのみを選択。選択した各プラットフォームに、すぐに使える専用フォルダが作成されます。
Favicon、Apple touch アイコン、PWA アイコン、オプションのマスク可能アイコン、site.webmanifest、head タグスニペット。
res/mipmap ランチャーアセット、オプションの丸アイコン、アダプティブアイコンリソース、Play ストア掲載アイコン。
iPhone、iPad、App Store のスロットを含む AppIcon.appiconset と Contents.json。
同じブランドマークから favicon、マニフェスト、Apple touch、マスク可能アイコンアセットを作成します。
ランチャー密度リソース、丸バリエーション、アダプティブアイコンファイル、Play ストア画像を準備します。
すべてのスケールを手動でエクスポートする代わりに、Xcode 対応の AppIcon.appiconset を生成します。
Web とネイティブプラットフォーム全体で、共有のパディング、ソースアートワーク、背景色を使用します。
優れたアプリアイコンは、小さな 16×16 のブラウザ favicon から大きな 512×512 のストア掲載画像まで、認識可能である必要があります。中央にシンプルで高コントラストのマークを配置した、1024×1024 ピクセル以上の正方形ソース画像から始めてください。
小さなテキスト、細い輪郭、大きなサイズでのみ機能する視覚的詳細は避けてください。ブラウザまたはオペレーティングシステムがアイコンを小さな寸法でレンダリングする際に、これらはしばしば消えてしまいます。ロゴが長方形の場合は、引き伸ばすのではなく、まず正方形のキャンバスに配置してください。
Web/PWA エクスポートは、public フォルダで一般的に必要なブラウザとインストール可能な Web アプリアセットをカバーします。これには、最新のブラウザ向けの PNG favicon サイズ、より広範なレガシー互換性のためのオプションの favicon.ico、iOS ホーム画面ブックマーク用の Apple touch アイコンが含まれます。
インストール可能な PWA 向けに、パッケージには 192×192 と 512×512 のマニフェストアイコンも含まれます。マスク可能オプションを有効にすると、デバイスが独自のアイコン形状を適用する際に重要なアートワークを保持することを目的としたアイコンが追加されます。
マニフェスト設定は含まれますが、PWA 実装は含まれません
生成された site.webmanifest と head タグスニペットは、アイコン設定を高速化します。アプリには、適切なサービスワーカーとインストール可能性の要件など、PWA 設定の残りの部分が必要です。
Android デバイスは、オペレーティングシステムが各画面密度に適した画像を選択できるように、密度固有のランチャーリソースを使用します。Android エクスポートは、これらのファイルを通常の res/mipmap-* ディレクトリに整理し、オプションの丸ランチャーバリエーションと 512×512 の Play ストア掲載アイコンを含めることができます。
アダプティブアイコンは、XML 定義を介して前面と背景のレイヤーを組み合わせる、Android ネイティブのランチャーリソースです。単一画像モードでは、このジェネレーターはソース画像と選択した背景色から互換性のある派生リソースを作成します。
重要：アダプティブアイコンは自動的なアートワーク分離ではありません
単一のフラット画像を、真に編集可能なロゴ前面と独立した背景レイヤーに信頼性高く分割することはできません。最良の結果を得るには、ロゴを中央に配置し、十分なパディングを確保してください。ブランドに完全に適合するアダプティブアイコンの場合は、Android プロジェクトで別途設計した前面と背景のアートワークを使用してください。
iOS エクスポートは、Xcode アセットカタログ用に設計された AppIcon.appiconset フォルダを作成します。これには、iPhone、iPad、App Store に必要な画像バリエーションが含まれ、生成された各画像を予想される idiom、ポイントサイズ、スケールにマッピングする Contents.json ファイルが付属します。
iOS アプリアイコンは、選択した背景色にフラット化されます。これにより、透明なアイコン出力が回避され、生成されたアセットセットが標準の App Store アイコン要件に準拠します。
これら 2 つの用語は、どちらもシステム制御のアイコン形状に関連するため、混同しやすいです。しかし、これらは交換可能ではありません。
マスク可能アイコンは、インストールされた PWA にランチャーマスク用の追加の安全スペースを提供する Web アプリマニフェスト画像ファイルです。Android アダプティブアイコンは、前面と背景のレイヤーと XML 参照で構成されるネイティブ Android リソースです。PWA とネイティブ Android アプリの両方を提供する場合は両方を有効にしますが、各ファイルタイプは独自のプラットフォーム設定で使用してください。
このシーンは、ブラウザベースの画像処理のために設計されています。ソース画像は、リモート画像処理サーバーにアップロードされるのではなく、ブラウザ内でローカルに変換されます。これは、未リリースの製品アートワーク、クライアントのロゴ、または内部アプリアセットを準備する際に役立ちます。
ページ自体は、アプリケーションコードと処理リソースをウェブサイトから読み込みます。ローカル処理とは、画像データをサーバーサイド変換のために送信する必要がないことを意味します。
