ConvertPixel

ConvertPixel · WEB APP

ConvertPixelをホーム画面に追加

Safariでは共有メニューからWebアプリを追加します。アプリのように開け、一度使ったツールはオフラインでも利用できます。

  1. Safariのツールバーで「共有」をタップします。

  2. 「ホーム画面に追加」を選び、「追加」をタップします。

アプリアイコンジェネレーター

スマート構図の画像、テキスト、106個の内蔵アイコン、自分のSVG・Iconfont Symbolセット、または再現可能なIdenticonから、Android、iOS、watchOS、Wear OS、macOS、tvOS、Web向けの全サイズを書き出せます。すべてブラウザー内で生成されます。

FaviconジェネレーターWebだけを初期選択。ZIPにはブラウザー用、ホーム画面用、PWA用の画像と参照コードが入ります。人物背景リムーバー人物向け · 6.6 MB ローカルモデル
生成するWebマニフェストに使用します。

前景のレイアウト

影
プラットフォーム側でマスクされない出力にのみ適用します。iOSとAndroidのアダプティブアイコンはシステムがマスクします。

プレビュー

最も強く切り取るAndroidランチャーのマスクです。セーフゾーンはこの形で決まり、内接円の外側は表示されません。

円の外側はAndroidランチャーのマスクで切り取られる場合があります。

プラットフォーム

生成はすべてこのタブ内で行われ、アップロードはありません。対応ブラウザでは使用済みの機能がキャッシュされ、オフラインで再利用できます。

各プラットフォームの要件

7プラットフォーム向け、全61ファイル。

Android

各密度のアダプティブアイコンレイヤー、テーマアイコン用のモノクロレイヤー、旧端末向けアイコン、Playストア掲載画像を生成します。

  • 108dpレイヤー内で必ず表示されるのは、中央の直径66dpの円だけです。端末ごとにマスクが異なり、中心から33dpまで切り込むことがあるため、円の外にある重要な要素は欠ける可能性があります。
  • 背景レイヤーは完全に不透明である必要があります。前景レイヤーには透明部分を使用できます。背景が透明だと、一部のランチャーで黒または不定の領域として表示されます。
  • Playストア画像は512×512の32ビットPNGで、透明部分は使用できません。角丸や影はGoogleが自動適用するため、画像自体に含めると二重に表示されます。

iOS

Default・Dark・Tintedの1024px外観を、すぐ使えるXcodeアセットカタログとして出力し、新しいIcon Composer向けのクリーンなレイヤーも含めます。

  • Xcode 15以降、iOS、iPadOS、watchOSに必要なのは1024×1024の画像1枚だけです。アセットカタログで単一サイズのApp Iconセットを選びます。17個のファイルを出力するジェネレーターは旧方式に基づいています。
  • 透明部分は使用できません。アルファチャンネルはApp Store審査で却下される代表的な原因のため、書き出し前に背景へ合成します。
  • 角丸を画像に含めないでください。iOSが独自の角丸マスクを適用するため、自分で丸めた角は再度マスクされ、不自然な形になります。
  • Appleは現在、Default・Dark・Clear・Tintedの外観に対応しています。この書き出しには互換性のあるDefault・Dark・グレースケールTinted素材が含まれ、クリーンなレイヤーはIcon ComposerでLiquid GlassやClear向けに調整できます。

watchOS

現行Icon Composer向け1088×1088キャンバスと、旧watchOSアセットカタログ向け1024px互換素材を生成します。

  • Apple Watchの現行Icon Composerキャンバスは1088×1088、旧来の単一サイズカタログは1024pxです。異なる仕様を混同せず、現行と互換の両方を書き出します。
  • Watchのアイコンは常に円形で表示されます。主体を中央に置き、表示されない四隅から離してください。

Wear OS

Watchアプリ向けのPlayストア掲載画像。Watchの掲載要件に合わせた、より狭いセーフゾーンを使用します。

  • Wear OSアプリも同じPlayストアで配布されるため、掲載画像は512×512で透明部分は使用できません。ただし外周は切り取られる場合があるので、重要な要素は中央の384×384内に収めてください。
  • 影のマスクは自動的に適用されます。元画像には影を付けないでください。

macOS

必要な全サイズの完全なiconsetと、パッケージ済みの.icnsを生成します。macOSでは現在も1枚の画像から自動生成できません。

  • macOSは単一画像のワークフローの例外です。アセットカタログでは各サイズを個別に用意する必要があるため、完全なiconsetを生成します。
  • .iconsetフォルダー内のファイル名は固定です。変更するとiconutilが動作しなくなるため、書き出された構成をそのまま使用してください。
  • iOSと異なり、macOSではアイコンが特定の形にマスクされません。用意した輪郭がそのまま表示されるため、画像自体を希望する形に整えてください。

tvOS

必要な2サイズのレイヤー式パララックスアイコンと、2種類のTop Shelf画像を生成します。ここで唯一、正方形ではないアイコンです。

  • Apple TVのアイコンは平面画像ではなくレイヤー構造です。標準ではBack、Middle、Frontの3層（最大5層）が、フォーカス時に相対的に動きます。1枚の平面画像も使用できますが、効果は失われます。
  • どちらのアイコンも正方形ではなく5:3です。ホーム画面用は800×480、App Store用は1280×768です。正方形のデザインは左右に背景が追加されます。
  • tvOS 9.0以降への提出には、1920×720とワイド版2320×720の両方のTop Shelf画像が必要です。どちらかが欠けると提出できません。

Web

favicon、Apple touch icon、PWAマニフェスト用アイコン、maskable版に加え、それらを参照するHTMLとマニフェストを生成します。

  • maskable PWAアイコンはAndroidのアダプティブアイコンと同様にプラットフォーム側でマスクされるため、同じ中央セーフゾーンが必要です。キャンバス全体を埋めると端が欠けます。
  • apple-touch-iconに透明部分は使用できません。iOSでは黒い背景に合成されるため、透明部分がホーム画面で黒い斑点として表示されます。
  • 現在のfavicon.icoにも、16、32、48ピクセルの画像が1ファイルに含まれます。ブラウザーやOSの表示場所ごとに異なるサイズが使われます。
プライバシー設計

ファイルではなくツールを共有

必要な人へこのページを送れます。リンクに画像、ファイル名、利用履歴は含まれません。