PWA用マスカブルアイコン作成

マスカブルアイコンは、ブラウザーまたはオペレーティング システムがプラットフォームに適した形状にトリミングできるように設計された Web アプリ マニフェスト イメージです。これは、マスキング可能なマニフェスト目的値を使用し、標準化されたセンターの安全ゾーン内に重要なアートワークを保持します。

これは、アイコンを中心とし、直径がアイコンの小さい方の寸法の 80% に等しい円、または半径が 40% の円です。その円内のピクセルは表示されたままであることが保証されます。これは 80% の正方形ではないため、その幅の正方形の角は安全な円の外側に位置する可能性があります。

いいえ、10 パーセントは、キャンバスの各端から直径 80% の円の外端までの距離です。幅の広いアートワークや正方形のアートワークでも、角付近で円を横切ることができます。エクスポートする前に、破線の円形オーバーレイとすべてのプレビュー形状を検査します。

この仕様では、ユーザー エージェントが独自に選択した単色に透明ピクセルを合成できるようにしており、透明を避けることが推奨されています。したがって、このジェネレーターは、予測可能な結果を​​得るために、選択した不透明なフルブリードの背景にソースを配置します。

いいえ。背景が完全に塗りつぶされた完全な正方形の画像をエクスポートします。ブラウザまたはオペレーティング システムは、独自の円、角丸、角丸四角形、またはその他のマスクを適用します。このツールのシェイプはプレビューであり、PNG にベイクされることはありません。

これらは、Chromium ベースの PWA インストール ガイダンスで広く使用されている大小のペアです。これらはブラウザに表示される実用的なサイズであり、W3C マスカブル アイコン仕様で義務付けられている寸法ではありません。

マニフェストには技術的には複数の目的のトークンを含めることができますが、通常は専用ファイルの方が明確です。マスカブルアイコンには、通常のコンテキストではアイコンが不必要に小さく見える可能性がある安全スペースが含まれているため、このツールは目的をマスカブルものとして出力し、通常のアイコンを PWA セットに残します。

いいえ。Web マスカブル アイコンは、Web アプリ マニフェストによって参照される 1 つの正方形の画像です。ネイティブ Android アダプティブ アイコンは、個別の前景レイヤーと背景レイヤーから構成され、モノクロ レイヤーを追加する場合があり、Android リソースで構成されます。

ファイルとスニペットを PWA に追加し、Chrome DevTools を開き、[アプリケーション] → [マニフェスト] → [アイコン] を使用します。 Chrome では最小限の安全領域のみを表示できるため、ここでプレビューに加えてインストールされたマニフェストの結果を検査できます。

いいえ。読み取り、プレビュー、サイズ変更、PNG エンコード、ZIP パッケージ化はすべてブラウザーでローカルに実行されます。 LogoFoundry は、お客様が選択したアートワークを受け取ったり保存したりしません。