デザインガイドライン

形、セーフゾーン、視覚の重さはプラットフォームごとに違います。指針に沿うとネイティブでプロらしく見えます。

iOS

• 形: 超楕円（Squircle）。Zapicon で Squircle をオン。
• サイズ: 20×20 @2x/@3x から 1024×1024 @1x。
• セーフゾーン: 主題はだいたい中央 66% に。
• 背景: 透明は避ける。iOS はアイコン全面を塗る。
• スタイル: シンプル、中央寄せ、文字はできるだけ入れない。

Android

• 形: アダプティブアイコンは端末がマスク。前景は端に触れない。
• サイズ: 48×48 mdpi 〜 192×192 xxxhdpi。
• セーフゾーン: 重要部分は直径約 66% の円の中。
• レイヤー: Zapicon は前景 PNG を出す。アダプティブなら Android プロジェクト側で背景レイヤーを足す。
• スタイル: Material は太い形と明確なシルエット。

macOS

• 形: 角丸矩形。iOS Squircle ほど極端ではない。
• サイズ: 16×16 @1x/@2x 〜 512×512 @1x/@2x。
• スタイル: Dock と Finder は最大 512 px なので、大きいサイズではディテールを足してよい。
• ICNS: Zapicon が自動生成。

Windows

• 形: 正方形か透明背景。UWP は OS がマスク、Win32 はしない。
• サイズ: 1 つの ICO に 16×16 〜 256×256。
• スタイル: タスクバーとタイトルバーの 16×16 でも読めること。
• ICO: 標準サイズをすべて埋め込み。

Web

• Favicon: 16×16、32×32、または SVG。Zapicon はマルチサイズ ICO。
• Apple touch icon: ホーム画面ブックマーク用 180×180 PNG。
• PWA: 192×192 と 512×512 PNG。透明または単色。
• スタイル: 16×16 でも favicon が潰れないこと。

Tauri

Tauri を選んで一式を書き出し、プロジェクトのアイコンフォルダへコピー。

Flutter

Flutter を選ぶと Android と iOS を一度に。アダプティブ背景は Flutter プロジェクト側で別設定。

Zapicon のガイド

エディターで デザインガイド を重ねます。

• Apple アイコングリッド
• Android アダプティブグリッド
• Windows Fluent グリッド
• 黄金比スパイラル
• ピクセルグリッド

エディターを離れずに位置合わせできます。