定义图标和主题颜色

项目
04/04/2023

可以在操作系统 (操作系统) 中自定义安装在 Windows 上的 PWA。 PWA 可以为标题栏定义一组图标和主题颜色。

定义图标

在 Windows 中，用户可以通过图标识别应用。图标显示在任务栏、“开始”菜单中，以及系统设置等其他位置。

PWA 可以配置操作系统应使用哪些映像文件在这些不同位置显示图标。可以根据上下文提供多个映像供操作系统选择。

在 Web 应用清单文件中，应用图标是使用 icons 成员定义的：

{
    "icons": [
        {
            "src": "/icons/icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/icons/icon-256x256.png",
            "sizes": "256x256",
            "type": "image/png"
        },
        {
            "src": "/icons/icon-384x384.png",
            "sizes": "384x384",
            "type": "image/png"
        },
        {
            "src": "/icons/icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}

数组中的每个 icons 图标至少应附带 src 和 sizes 属性。图标还可以具有 type 和 purpose 属性。

属性	说明
`src`	图像文件的路径，可以是应用根文件夹中的相对路径，也可以是绝对 URL。
`sizes`	相应图像可用于的大小的空格分隔列表。
`type`	操作系统用于快速检测映像类型的可选提示。
`purpose`	一个可选提示，可帮助 OS 根据上下文选择正确的图标图像。该值可以是 `monochrome`、 `maskable`或 `any`。

详细了解图标成员。

图标图像大小

通过在 Web 应用清单中提供具有特定维度的图像，可以在 Windows 上增强 PWA。建议选择以下选项之一：

级别 1： (基本映像支持：512x512) 这是从中生成缺失映像的基础映像。
级别 2： (磁贴) 在此级别，Web 应用清单包含默认 (1 倍) 显示比例的磁贴图像。每个图像必须采用 PNG 格式并具有 any 目的集。下面是建议的图像和大小列表。
- 44x44 - 应用图标
- 71x71 - 小磁贴
- 150x150 - 中等磁贴
- 310x150 - 加宽磁贴
- 310x310 - 大磁贴
- 50x50 - 应用商店徽标
- 620x300 - 初始屏幕
级别 3： (具有显示比例的磁贴) 在此级别，Web 应用清单应包含所有 Windows 显示比例大小的磁贴图像。显示比例是 Windows 中的一种用户配置 (用户可以通过转到设置>显示>比例) 进行更改。 Web 应用清单图标应包含以下尺寸的图像：
- 44x44 - 应用图标
- 55x55 - 应用图标 1.25x 显示比例
- 66x66 - 应用图标 1.5x 显示比例
- 88x88 - 应用图标 2 倍显示比例
- 176x176 - 应用图标 4 倍显示比例
- 71x71 - 小磁贴
- 89x89 - 小磁贴 1.25x 显示比例
- 107x107 - 小磁贴 1.5x 显示比例
- 142x142 - 小磁贴 2 倍显示比例
- 284x284 - 小磁贴 4 倍显示比例
- 150x150 - 中等磁贴
- 188x188 - 中等磁贴 1.25x 显示比例
- 225x225 - 中等磁贴 1.5 倍显示比例
- 300x300 - 中等磁贴 2 倍显示比例
- 600x600 - 中等磁贴 4x 显示比例
- 310x150 - 加宽磁贴
- 388x188 - 宽磁贴 1.25x 显示比例
- 465x225 - 宽磁贴 1.5x 显示比例
- 620x300 - 加宽磁贴 2 倍显示比例
- 1240x600 - 宽磁贴 4 倍显示比例
- 310x310 - 大磁贴
- 388x388 - 大磁贴 1.25x 显示比例
- 465x465 - 大磁贴 1.5 倍显示比例
- 620x620 - 大磁贴 2 倍显示比例
- 1240x1240 - 大磁贴 4 倍显示比例
- 50x50 - 应用商店磁贴
- 63x63 - 存储磁贴 1.25x 显示比例
- 75x75 - 存储磁贴 1.5 倍显示比例
- 100x100 - 存储磁贴 2x 显示比例
- 200x200 - 存储磁贴 4x 显示比例
- 620x300 - 初始屏幕
- 775x375 - 初始屏幕 1.25x 显示比例
- 930x450 - 初始屏幕 1.5 倍显示比例
- 1240x600 - 初始屏幕 2 倍显示比例
- 2480x1200 - 初始屏幕 4 倍显示比例
级别 4 (磁贴、显示比例和目标大小) 在此级别上，你将提供磁贴的图像以及显示比例和目标大小图像，以便在 Windows 中的各种图面中显示，包括任务栏、开始菜单、任务管理器、Alt+Tab 任务切换器等。这为用户提供了最佳体验，但也需要开发人员付出最多的努力。 Web 应用清单图标应包含以下尺寸的图像：
- 44x44 - 应用图标
- 55x55 - 应用图标 1.25x 显示比例
- 66x66 - 应用图标 1.5x 显示比例
- 88x88 - 应用图标 2 倍显示比例
- 176x176 - 应用图标 4 倍显示比例
- 71x71 - 小磁贴
- 89x89 - 小磁贴 1.25x 显示比例
- 107x107 - 小磁贴 1.5x 显示比例
- 142x142 - 小磁贴 2 倍显示比例
- 284x284 - 小磁贴 4 倍显示比例
- 150x150 - 中等磁贴
- 188x188 - 中等磁贴 1.25x 显示比例
- 225x225 - 中等磁贴 1.5 倍显示比例
- 300x300 - 中等磁贴 2 倍显示比例
- 600x600 - 中等磁贴 4x 显示比例
- 310x150 - 加宽磁贴
- 388x188 - 宽磁贴 1.25x 显示比例
- 465x225 - 宽磁贴 1.5x 显示比例
- 620x300 - 加宽磁贴 2 倍显示比例
- 1240x600 - 宽磁贴 4 倍显示比例
- 310x310 - 大磁贴
- 388x388 - 大磁贴 1.25x 显示比例
- 465x465 - 大磁贴 1.5 倍显示比例
- 620x620 - 大磁贴 2 倍显示比例
- 1240x1240 - 大磁贴 4 倍显示比例
- 50x50 - 应用商店磁贴
- 63x63 - 存储磁贴 1.25x 显示比例
- 75x75 - 存储磁贴 1.5 倍显示比例
- 100x100 - 存储磁贴 2x 显示比例
- 200x200 - 存储磁贴 4x 显示比例
- 620x300 - 初始屏幕
- 775x375 - 初始屏幕 1.25x 显示比例
- 930x450 - 初始屏幕 1.5 倍显示比例
- 1240x600 - 初始屏幕 2 倍显示比例
- 2480x1200 - 初始屏幕 4 倍显示比例
- 16x16 - 任务栏、开始菜单、任务管理器的目标大小
- 20x20 - 任务栏、开始菜单、任务管理器的目标大小
- 24x24 - 任务栏、开始菜单、任务管理器的目标大小
- 30x30 - 任务栏、开始菜单、任务管理器的目标大小
- 32x32 - 任务栏、开始菜单、任务管理器的目标大小
- 36x36 - 任务栏、开始菜单、任务管理器的目标大小
- 40x40 - 任务栏、开始菜单、任务管理器的目标大小
- 44x44 - 任务栏、开始菜单、任务管理器的目标大小
- 48x48 - 任务栏、开始菜单、任务管理器的目标大小
- 60x60 - 任务栏、开始菜单、任务管理器的目标大小
- 64x64 - 任务栏、开始菜单、任务管理器的目标大小
- 72x72 - 任务栏、开始菜单、任务管理器的目标大小
- 80x80 - 任务栏、开始菜单、任务管理器的目标大小
- 96x96 - 任务栏、开始菜单、任务管理器的目标大小
- 256x256 - 任务栏、开始菜单、任务管理器的目标大小