2026年 Mac サイト favicon と PWA アイコン PNG 納品意思決定マトリクス:多サイズ、maskable 安全区、sRGB、リモート M4 批処理検収チェックリスト

タブ用 faviconapple-touch-iconWeb App Manifest192/512 は、寸法・マスク・色彩の要求がバラバラな「三種の神器」です。SVG を併用しても、社内ゲートウェイやレガシー環境では PNG ラダーが残ります。本稿は 2026 年の実務マトリクスとして、各スロットの典型ピクセル、maskable内側安全円sRGB 固定、アンシャープファイル容量しきい値リモート Mac mini M4 ワーカーでの再現検収までを一枚に整理します。

この記事の内容

論点:アイコン PNG はブリーフが分かれる

  1. 幾何が違う。タブは極小、iOS は角丸で角が食う、Android は adaptive で縁が落ちる。
  2. maskable は「大きい 512」ではない。外周はマスク下で捨てられる前提の安全区設計が必要。
  3. 色がブレる。広色域で作ったのにタグなしで出すと、sRGB 前提のシェルで意図とずれる。
  4. 容量は 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×192512×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 批処理検収チェックリスト

  1. 寸法ロック:マニフェスト記載 WxH と実ファイルが一致。奇数ピクセル禁止などチーム規約があれば自動弾き。
  2. sRGB:サンプリングで magick identify -verbose の Colorspace が sRGB、ICC の埋め込み方針どおりか。
  3. バイト上限(初期帯):32 ≤ 12KB180 ≤ 45KB192 ≤ 55KB512 any ≤ 180KB512 maskable ≤ 220KB — CDN に合わせ調整。
  4. アンシャープ監査:適用ファイルと三値をログ化し、差分レビュー可能に。
  5. 煙テスト:ステージングで Android Chrome と iOS Safari の「ホーム画面に追加」、スクショ保管。

ゲート例:test "$(stat -f%z pwa-192.png)" -le 55000(55KB 上限のとき)。

数値ポリシー(README にそのまま貼れる)

  • maskable 安全円:直径 0.8 × min(幅, 高さ)、正方形の中心。外側はマスクで欠けてよいブリード。
  • タッチアイコン余白:デフォルト全辺 10%、ヘアラインは 14% へ。
SVG favicon だけでは、PWA インストールや社内プロキシ環境で PNG が必須なケースが残ります。

よくある質問

512 を any と maskable で共用できるか。余白が maskable ルールを既に満たすなら可。満たさないなら二行に分け、Pixel 系のクリッピング事故を防ぎます。

タッチアイコンだけ暗い。sRGB マッチをやり直し、デザインツールの書き出しガンマと Safari の見え方を校正ディスプレイで突き合わせます。

次のステップ:リモート M4 で夜間バッチ

リブランドやマルチテナントでは、同一ツールチェーンの リモート Mac mini M4sipsmagickstat ゲートを固定し、ハッシュ付き成果物だけを CDN へ昇格させるのが安全です。ホームでサービス概要を確認し、購入・レンタル料金ご利用ガイド(いずれも閲覧はログイン不要の案内が中心)、関連記事は 技術インサイト からどうぞ。

リモート Mac M4 · favicon/PWA PNG

アイコンラダーと検収をワーカーに寄せる

リサイズ・ICC・容量ゲートをノードで再現。デザインは手元、納品はハッシュ単位で。

ホーム 購入・レンタルへ 料金・ノード ご利用ガイド 技術インサイト
リモート Mac M4 · favicon/PWA PNG ラダー一括検収
購入・レンタルへ