テーマカラーとアプリアイコン

<meta name="theme-color" content="#1f2937">タグは、モバイルではブラウザーのアドレスバーの色を、デスクトップのPWAではタイトルバーの色を設定します。コンテンツを変更せずに、ページを洗練されたアプリらしい見た目にできます。

ライトモードとダークモードに別々の色を指定します。<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">と、ダークカラーを指定した2つ目のタグを用意します。ブラウザーはユーザーのOS設定に基づいて一致する方を選択します。

マニフェストの theme_color は、アプリをインストール済みの PWA として実行したとき（スタンドアロンウィンドウのタイトルバー）の色を設定します。ページ内の theme-color メタタグと同じ色にすると、ブラウザーで実行した場合とインストール済みの場合で、視覚的なアイデンティティを統一できます。

<link rel="icon" href="/favicon.ico"> は、昔から使われているブラウザータブのアイコンです。この名前に反して、現在のブラウザーでは ICO よりも PNG や SVG が推奨されます。より鮮明に表示するには、<link rel="icon" type="image/png" sizes="32x32" href="/icon-32.png"> で 32x32 の PNG を指定してください。

最新のブラウザーは SVG ファビコンに対応しています。<link rel="icon" type="image/svg+xml" href="/icon.svg"> のように指定します。どのサイズでも鮮明で、ファイルサイズも小さいのが特徴です。ベクターロゴに使用し、SVG ファビコンに対応していないブラウザー向けに PNG のフォールバックも用意してください。

iOS のホーム画面では apple-touch-icon が使用されます。<link rel="apple-touch-icon" href="/apple-touch-icon.png"> のように指定してください。180x180 の PNG を用意します。iOS はホーム画面へのインストール時に Web マニフェストのアイコンを読み込まないため、apple-touch-icon のリンクが必要です。

Android へのインストールでは、マニフェストの icons 配列からアイコンが読み込まれます。192x192（ホーム画面用）と 512x512（スプラッシュ画面、アプリドロワー用）の PNG を含めてください。さらに、Android がアイコンをマスクしてホーム画面のアイコン形状（円、角丸正方形、正方形）に合わせられるよう、purpose に "maskable" を指定したコピーも追加します。

マスク可能アイコンでは、主要なコンテンツを中央の 80% のセーフゾーン内に収めてください。外側の 20% は、デバイスのマスク形状によって切り取られることがあります。デザイン中は maskable.app などのツールを使い、さまざまなマスク形状でアイコンをプレビューしてください。

Windows 8/10 の固定タイルには、<meta name="msapplication-TileImage" content="/tile.png"> と <meta name="msapplication-TileColor" content="#1f2937"> を使用します。現在は他のプラットフォームより優先度が低くなっていますが、サイトを固定する Windows ユーザーには今でも役立ちます。

旧 IE/Edge では、<meta name="msapplication-config" content="/browserconfig.xml"> によって、複数サイズのタイルアイコンを含む XML ファイルを指定します。現在ではほぼ不要なため、新しいサイトでは browserconfig.xml を省略しても問題ありません。

Safari macOS の固定タブには、<link rel="mask-icon" href="/safari-icon.svg" color="#1f2937"> を使用します。SVG は単色のアイコンにしてください（色は color 属性によって上書きされます）。macOS Safari の固定タブ機能でのみ使用されます。

realfavicongenerator.net を使うと、1 つのソースからすべてのアイコンのバリエーションを生成できます。実際の iOS デバイス（ホーム画面に追加）と Android（ブラウザーのメニューからアプリをインストール）でテストし、アイコンが正しく切り取られ、ピクセル化されずに表示されることを確認してください。

theme-color（メディアクエリによるバリエーションを含む）はアドレスバーの色合いを変え、マニフェストの theme_color はインストール済みアプリのタイトルバーの色合いを変えます。アイコンには、ファビコン（SVG + PNG）、apple-touch-icon（iOS、180x180）、マニフェストアイコン（Android、192 + 512 + maskable）、Safari の mask-icon（単色 SVG）、msapplication-TileImage（Windows の固定タイル）があります。realfavicongenerator.net を使い、1 つのソースからすべてのバリエーションを生成してください。