タブ用 favicon、apple-touch-icon、Web App Manifest の 192/512 は、寸法・マスク・色彩の要求がバラバラな「三種の神器」です。SVG を併用しても、社内ゲートウェイやレガシー環境では PNG ラダーが残ります。本稿は 2026 年の実務マトリクスとして、各スロットの典型ピクセル、maskable の内側安全円、sRGB 固定、アンシャープとファイル容量しきい値、リモート Mac mini M4 ワーカーでの再現検収までを一枚に整理します。
論点:アイコン PNG はブリーフが分かれる
- 幾何が違う。タブは極小、iOS は角丸で角が食う、Android は adaptive で縁が落ちる。
- maskable は「大きい 512」ではない。外周はマスク下で捨てられる前提の安全区設計が必要。
- 色がブレる。広色域で作ったのにタグなしで出すと、sRGB 前提のシェルで意図とずれる。
- 容量は CDN 契約。
statの上限をワーカーで自動化しないとリリース直前に手戻りする。
色彩は sRGB/Display P3 検収、フォーマット方針は WebP・AVIF と PNG の納品 と揃えます。ネイティブ系の寸法表は iOS アイコン納品マトリクス、デスクトップ束ねは ICNS バッチ、メタデータ整理は ICC・再圧縮 を参照してください。
スロット対照表:favicon・タッチアイコン・manifest・maskable
| 納品スロット | 典型 PNG(WxH) | 主なリスク | ルール |
|---|---|---|---|
| クラシック favicon | 32×32(任意 16×16) |
縮小で線が潰れる | ベクター系は弱いアンシャープ。写真ノイズは別案(SVG 併用など) |
rel="apple-touch-icon" |
180×180 |
iOS の角丸で角が欠ける | ロゴ外周に全辺 10% 以上の余白(細線は 14% 目安) |
manifest icons[](any) |
192×192 と 512×512 |
purpose 不足でインストール UX が劣化 |
"purpose": "any" を必ず付与。maskable 用は別行が安全 |
maskable 512 |
512×512+内側安全アート |
円/スクワークルで縁が消える | 重要図形は一辺の 80% 直径の中心円内。外側はブリード扱い |
実行手順:sRGB 正規化 → sips ラダー → 任意アンシャープ
ワーカーごとに sips --version と ImageMagick のビルドを JSONL に残し、ICC パスは組織標準に合わせてください。
① マスタを sRGB に揃える
sips --matchTo "/System/Library/ColorSync/Profiles/sRGB Profile.icc" master.png --out master_srgb.png
② 寸法を sips で一括生成
sips -z 32 32 master_srgb.png --out favicon-32.png
sips -z 180 180 master_srgb.png --out apple-touch-icon-180.png
sips -z 192 192 master_srgb.png --out pwa-192.png
sips -z 512 512 master_srgb.png --out pwa-512-any.png
16×16 は .ico 束ねが必要な場合のみ。通常は 32 と SVG で十分なことが多いです。
③ favicon 向けの軽いアンシャープ(任意)
magick favicon-32.png -colorspace sRGB -filter Lanczos -resize 32x32! -unsharp 0x0.45+0.45+0.006 favicon-32-sharp.png
半径は小さく。maskable 用の柔らかい 512 には原則かけません。-unsharp の三値はリビュー用に JSONL へ。
④ maskable の見え方確認
Chrome DevTools → Application → Manifest の maskable プレビューで、80% 円内にロゴが収まっているか確認します(適応型ランチャーのスクワークル相当)。
⑤ ハッシュと manifest/link の一致
shasum -a 256 pwa-512-any.png >> icons-manifest.sha256
リモート M4 批処理検収チェックリスト
- 寸法ロック:マニフェスト記載 WxH と実ファイルが一致。奇数ピクセル禁止などチーム規約があれば自動弾き。
- sRGB:サンプリングで
magick identify -verboseの Colorspace が sRGB、ICC の埋め込み方針どおりか。 - バイト上限(初期帯):
32 ≤ 12KB、180 ≤ 45KB、192 ≤ 55KB、512 any ≤ 180KB、512 maskable ≤ 220KB— CDN に合わせ調整。 - アンシャープ監査:適用ファイルと三値をログ化し、差分レビュー可能に。
- 煙テスト:ステージングで Android Chrome と iOS Safari の「ホーム画面に追加」、スクショ保管。
ゲート例:test "$(stat -f%z pwa-192.png)" -le 55000(55KB 上限のとき)。
数値ポリシー(README にそのまま貼れる)
- maskable 安全円:直径
0.8 × min(幅, 高さ)、正方形の中心。外側はマスクで欠けてよいブリード。 - タッチアイコン余白:デフォルト全辺 10%、ヘアラインは 14% へ。
よくある質問
512 を any と maskable で共用できるか。余白が maskable ルールを既に満たすなら可。満たさないなら二行に分け、Pixel 系のクリッピング事故を防ぎます。
タッチアイコンだけ暗い。sRGB マッチをやり直し、デザインツールの書き出しガンマと Safari の見え方を校正ディスプレイで突き合わせます。
次のステップ:リモート M4 で夜間バッチ
リブランドやマルチテナントでは、同一ツールチェーンの リモート Mac mini M4 に sips・magick・stat ゲートを固定し、ハッシュ付き成果物だけを CDN へ昇格させるのが安全です。ホームでサービス概要を確認し、購入・レンタル・料金・ご利用ガイド(いずれも閲覧はログイン不要の案内が中心)、関連記事は 技術インサイト からどうぞ。