Favicon・アプリアイコン最適化（書き出しとHTML設置の完全ガイド）
結論：最小セットは 16×16 / 32×32 / 180×180 / 192×192 / 512×512。 Web App Manifest と metadata.icons を整えれば主要環境はカバーできます。 Safari のピン留めは mask-icon（SVG・単色） を指定。
先に全体像
1) ソース画像（1024×1024+）→ 2) 5サイズを書き出し（/public/icons）→ 3) /app/manifest.ts → 4) app/layout.tsx の metadata.icons → 5) 実機検証＆キャッシュ更新。この順が最短です。
1. 用意するファイル（最小でOK）
/public/icons/icon-16.png（Favicon）/public/icons/icon-32.png（Favicon）/public/icons/apple-touch-icon.png（180×180）/public/icons/icon-192.png（PWA）/public/icons/icon-512.png（PWA）/public/icons/safari-pinned-tab.svg（Safariのピン留め用・単色）
1枚の正方形ロゴからの一括書き出しで十分。下記の sharp スクリプト例を利用すると高速です。
2. Next.js の設置（metadata.icons / manifest）
A) /app/manifest.ts の例
// app/manifest.ts
import type { MetadataRoute } from "next";
export default function manifest(): MetadataRoute.Manifest {
return {
name: "gazou-compressor.jp",
short_name: "GC",
start_url: "/",
display: "standalone",
background_color: "#ffffff",
theme_color: "#0ea5e9",
icons: [
{ src: "/icons/icon-192.png", sizes: "192x192", type: "image/png" },
{ src: "/icons/icon-512.png", sizes: "512x512", type: "image/png" }
]
};
}
B) app/layout.tsx の metadata.icons 例
// app/layout.tsx（抜粋）
export const metadata: Metadata = {
// ...
icons: {
icon: [
{ url: "/icons/icon-16.png", sizes: "16x16", type: "image/png" },
{ url: "/icons/icon-32.png", sizes: "32x32", type: "image/png" }
],
apple: { url: "/icons/apple-touch-icon.png", sizes: "180x180" },
other: [{ rel: "mask-icon", url: "/icons/safari-pinned-tab.svg", color: "#0ea5e9" }]
}
};
設置後のキャッシュ更新
アイコンはブラウザ/OS に強くキャッシュされます。差し替え時はファイル名に
v2 やハッシュを付けると安全です。3. よくある落とし穴（回避策）
- SVG を favicon として直接指定 → 古い環境未対応あり。PNG も併用。
- manifest の
icons[].sizesと実ファイルの不一致 → ブラウザが誤選択。 - Safari のピン留めにフルカラーSVG → 単色の
mask-iconを用意（色はcolor属性）。 - 縁のにじみ → 透過ロゴは余白を十分に、必要に応じてマット処理で背景になじませる。
4. 公開前チェックリスト（10項目）
- 16/32/180/192/512 の5点セットが揃っている。
/app/manifest.tsが存在し、icons に 192/512 が登録されている。metadata.iconsにicon/apple/mask-iconを宣言した。- SVG は単色の
mask-iconを用意し、colorを指定した。 - それぞれの
Content-Typeが適切（image/png, image/svg+xml）。 - ブラウザ/OS のキャッシュをクリアすると更新される（またはファイル名にバージョン）。
- OGP（1200×630）は別管理で混在させていない。
- 必要なら PWA の
displayをstandaloneに。 - iOS/Android のホーム追加アイコンを実機確認した。
- Lighthouse/アクセシビリティ検査で警告がない。
5. 付録：自動書き出しスクリプト（sharp / 任意）
1枚の assets/icon-source.png から /public/icons へ必要サイズを生成できます。
// scripts/generate-icons.mjs
import sharp from "sharp";
const sizes = [16, 32, 180, 192, 512];
const src = "assets/icon-source.png";
const outDir = "public/icons";
await Promise.all(
sizes.map(async (s) => {
const name = s === 180 ? "apple-touch-icon.png" : `icon-${s}.png`;
await sharp(src).resize(s, s).png({ compressionLevel: 9 }).toFile(`${outDir}/${name}`);
})
);
console.log("icons generated:", sizes.join(", "));
// ※ Safariピン留め用: /public/icons/safari-pinned-tab.svg は単色SVGを用意
6. 付録：mask-icon（Safari）の最小テンプレ
<!-- /public/icons/safari-pinned-tab.svg --> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"> <path d="M512 64L896 320v384L512 960 128 704V320z" fill="#000"/> </svg> <!-- metadata.icons.other の color で着色されます（SVGは単色で） -->