主题颜色与应用图标

<meta name="theme-color" content="#1f2937"> 标签会设置移动设备上的浏览器地址栏颜色，以及桌面 PWA 的标题栏颜色。它无需改变任何内容，就能让页面拥有精致的应用风格外观。

请为浅色和深色模式分别提供颜色：<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">，以及包含深色颜色的第二个标签。浏览器会根据用户的 OS 偏好选择相匹配的颜色。

清单中的 theme_color 会在应用以已安装的 PWA 运行时（独立窗口的标题栏）设置颜色。请将其与页面内的主题颜色元标签保持一致——无论是在浏览器中运行还是作为已安装应用运行，视觉标识都能保持相同。

<link rel="icon" href="/favicon.ico"> 是经典的网站标签页图标。尽管名称如此，现代浏览器更偏好 PNG 或 SVG，而不是 ICO。请通过 <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 主屏幕使用苹果触控图标：<link rel="apple-touch-icon" href="/apple-touch-icon.png">。请提供 180x180 的 PNG。iOS 不会读取网页清单中的图标来进行主屏幕安装；必须提供苹果触控图标链接。

安卓安装会从清单的图标数组中读取图标。请包含 192x192（主屏幕）和 512x512（启动画面、应用抽屉）的 PNG。请添加一份用途为“可遮罩”的副本，以便安卓将图标裁剪成与主屏幕图标形状匹配的形状（圆形、超椭圆形、正方形）。

可遮罩图标应将关键内容放在中心 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 应为单色图标（颜色会被颜色属性覆盖）。仅用于 macOS Safari 的固定标签页功能。

请使用 realfavicongenerator.net 从单一源文件生成每种图标变体。在真实 iOS 设备上（添加到主屏幕）和安卓设备上（从浏览器菜单安装应用）进行测试，以确认图标显示时裁剪正确且没有像素化。

网页应用清单中的“可遮罩”图标用途有什么作用？

主题颜色（带媒体查询变体）会为地址栏着色；清单主题颜色会为已安装应用的标题栏着色。图标包括网站图标（SVG + PNG）、苹果触控图标（iOS、180x180）、清单图标（安卓、192 + 512 + 可遮罩）、Safari 遮罩图标（单色 SVG）以及 msapplication-TileImage（Windows 固定磁贴）。请使用 realfavicongenerator.net 从一个源文件生成所有变体。